pseudo-element

Pseudo elements and SELECT tag

由 不想你离开。 提交于 2019-11-27 11:28:47
问题 Does the select tag allows to use the :after selector in order to create a pseudo element after it? I've tried on Chrome, Safari and Firefox on Mac and it doesn't seem to work. 回答1: Here is a compromise that I have used. http://jsfiddle.net/pht9d295/3/ <div class="select-wrapper"> <select> <option>United Kingdom</option> <option>Canada</option> <option>United States</option> </select> </div> And CSS body { background-color: #f6f6f6; padding: 10px; } .select-wrapper { background-color: #FFF;

CSS:after encoding characters in content

由 梦想与她 提交于 2019-11-27 11:27:12
问题 I am using the following CSS, which seems to be working: a.up:after{content: " ↓";} a.down:after{content: " ↑";} The characters however cannot seem to be encoded like this, as the output is literal and shows the actual string: a.up:after{content: " ↓";} a.down:after{content: " ↑";} If I can't encode it, it feels like I should use something such as .append() in jQuery, as that supports the encoding. Any ideas? 回答1: To use encoded Unicode characters in content you need to provide either the

css rotate a pseudo :after or :before content:“”

由 ε祈祈猫儿з 提交于 2019-11-27 11:15:56
anyway to make a rotation work on the pseudo content:"\24B6"? I'm trying to rotate a unicode symbol. methodofaction Inline elements can't be transformed, and pseudo elements are inline by default, so you must apply display: block or display: inline-block to transform them: #whatever:after { content:"\24B6"; display: inline-block; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } <div id="whatever">Some text </div> .process-list:after{ content: "\2191"; position: absolute; top:50%; right:-8px;

Vertically centering content of :before/:after pseudo-elements

由 南笙酒味 提交于 2019-11-27 10:55:44
I'm trying to achieve something similar to this picture: I have an image (as part of a slideshow) wrapped in a div, and with :before and :after pseudo-elements, I display two controls to move onto the next (>>) or previous (<<) images of the slideshow. So far, I have this: div { position: relative; } div:before { display:block; height: 100%; content: "stuff"; position:absolute; top: 0; left: 0; text-align: center; } I can't, however, center the content of the pseudo-elements, the text appears like this: Is this possible to achieve? If not, what would be the most semantic workaround? I do not

Combine :after with :hover

由 社会主义新天地 提交于 2019-11-27 10:24:20
I want to combine :after with :hover in CSS (or any other pseudo selector). I basically have a list and the item with the selected class has an arrow shape applied using :after . I want the same to be true for objects that are being hovered over but cant quite get it to work. Heres the code #alertlist { list-style:none; width: 250px; } #alertlist li { padding: 5px 10px; border-bottom: 1px solid #e9e9e9; position:relative; } #alertlist li.selected, #alertlist li:hover { color: #f0f0f0; background-color: #303030; } #alertlist li.selected:after { position:absolute; top: 0; right:-10px; bottom:0;

Using :before CSS pseudo element to add image to modal

由 ε祈祈猫儿з 提交于 2019-11-27 10:03:36
问题 I have a CSS class Modal which is absolutely positioned, z-indexed above it's parent, and nicely positioned with JQuery. I want to add a caret image (^) to the top of the modal box and was looking at using the :before CSS pseudo selector to do this cleanly. The image needs to be absolutely positioned and z-indexed above the modal, but I haven't found any way to add the appropriate class to the image in the content attribute: .Modal:before{ content:url('blackCarrot.png') /* with class

Font Awesome 5, why css content is not showing?

由 眉间皱痕 提交于 2019-11-27 09:31:52
I am trying to use FontAwesome in the content of css. It appears with the code for the icon instead of the icon. I have followed the online helps but still not working css @font-face { font-family: 'FontAwesome'; src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); } .fp-prev:before { color:#fff; content: '/f35a'; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; } Read this if you are using the JS+SVG version: Font Awesome 5 shows empty square when using the JS+SVG version First, you only need to include the CSS file of Font Awesome 5

:after vs. ::after

由 眉间皱痕 提交于 2019-11-27 09:10:11
问题 Is there any functional difference between the CSS 2.1 :after and the CSS 3 ::after pseudo-selectors (other than ::after not being supported in older browsers)? Is there any practical reason to use the newer specification? 回答1: It's pseudo- class vs pseudo- element distinction. Except for ::first-line , ::first-letter , ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo- elements require double colons. Pseudo

Adding text before list

由 余生颓废 提交于 2019-11-27 08:09:11
问题 I am trying to make a list like Element 1. bird Element 2. lion ... The problem is I don't want to write "Element" for every item. Is there any way to add content to my list? 回答1: You need CSS counters: #customlist { /* delete default counter */ list-style-type: none; /* create custom counter and set it to 0 */ counter-reset: elementcounter; } #customlist>li:before { /* print out "Element " followed by the current counter value */ content: "Element " counter(elementcounter) ": "; /* increment

Weird behavior in Firefox with outlines and pseudo-elements

由 不羁的心 提交于 2019-11-27 08:01:59
问题 Firefox behaves differently than Chrome and Safari (I haven't tested others browsers) when you combine outline and pseudo-elements. Is there a way to fix it or is this a bug? .main { position: relative; width: 100px; height: 100px; margin: 10px auto; border: 2px solid #f00; outline: 2px solid #00f; } .main:after { content: 'Hello'; position: absolute; width: 100px; text-align: center; bottom: -50px; } .wtf { width: 400px; margin: 90px auto; } <div class="main"></div> <div class="wtf"> <p>In
订阅 pseudo-element