pseudo-element

问题 I've created a list style navigation and each hyperlink can be multiple lines, after each hyperlink element I added a pseudo element 'arrow' after, would it be possible to align the pseudo element vertically regardless of the hyperlink height? The requirement would be for this to work in IE8 & above. The Mark-up: <ul> <li> <a href="#"> <h3 class="title">Cover</h3> <p class="subtitle">Lorem ipsum dolor sit</p> </a> </li> <li class="current"> <a href="#"> <h3 class="title">Lorem ipsum dolor sit

问题 Example: http://codepen.io/mastastealth/pen/gFjhi Basically, I have an element with an :after element set to opacity 0. On hover, it goes to opacity 1. Apparently it works in IE9 and everywhere else, but not IE10 (unless I click)? Ideas? 回答1: It appears there is a bug where the selector with a pseudo class followed by a pseudo element is not listened for when an event happens. If you add the listener by simply adding the selector with only the pseudo class your style will be applied on the

问题 It appears to me that Chrome does not treat "before" pseudoelement as a part of an element. More precisely, I have CSS definition .myclass:before{content:"A";} and HTML code <a href="blah" class="myclass">B</a> In Chrome the result is a hyperlink "AB" but only "B" is actually clickable. In Firefox and Opera the whole "AB" is a link, and my reading of CSS standard indicates that Chrome is wrong here. Am I right in assuming that this is Chrome's bug? Is there a simple and clean workaround? 回答1:

问题 So I've been work on a CSS selector engine, and I want to support pseudo-elements (::before, ::after, ::selection, ::first-line, etc). I noticed Slick, Sizzle, and some other popular engines seem to support them, but when looking through their code I found no code for it (now granted, I didn't look that hard). Does anyone know how they do it or some way I could do it? 回答1: Here's a simple way to find them in Webkit using jQuery, can fairly easily be converted to standard JS: $('*').filter

问题 Hi I have a list item containing text like this: <li>Search</li> and I want to display an icon using font awesome li:before { content: "\f002"; } I don't have the ability to just remove the "Search" text (it is being generated from a Drupal CMS, as is the markup and class names), but I want to hide the Search text, but show the pseudo element (the search icon). How do I do this? Normally what I would do to hide the text is just go: li { text-indent: -1000px; overflow: hidden; } but that will

问题 I am writing a HTML-editor using content-editable and I wanted to indicate line breaks ( <br> ) with a special character ("↩") at the end of each line that ends with a <br> . Therefore I wanted to add a pseudo-element ::after with that character as content . br::after { content: ' ↩'; } Unfortunately this doesn't work. ::before doesn't work either. Is there another possibility to achieve the desired result? 回答1: From this accepted answer : Which elements support the ::before and ::after

问题 I want to show the data like funnel stack as illustrated below. I was able to create the taper using borders, for example: <div class="taper"></div> and using the following CSS: .taper { width: 200px; height: 0px; border-color: lightgray transparent; border-style: solid; border-width: 50px 25px 0 25px; } Of course, the idea would be to wrap this div.taper in a container, add other elements and position them as needed, a bit of work but doable. However, I don't necessarily know how many lines

问题 In normal power mode, on iOS11 (tested on iPhone 8 and X), I am able to hide a button element overlay inside the shadow root of a video element. Once low power mode is enabled, my pseudo-element is no longer able to hide the button element overlay. What's going on? How can I hide the button element in low power mode? My CSS // Placed outside Shadow DOM in my SCSS file. video::-webkit-media-controls-start-playback-button { display: none !important; } DOM element to be modified <video style=

问题 In normal power mode, on iOS11 (tested on iPhone 8 and X), I am able to hide a button element overlay inside the shadow root of a video element. Once low power mode is enabled, my pseudo-element is no longer able to hide the button element overlay. What's going on? How can I hide the button element in low power mode? My CSS // Placed outside Shadow DOM in my SCSS file. video::-webkit-media-controls-start-playback-button { display: none !important; } DOM element to be modified <video style=

问题 I want to trigger a jQuery animation when content that I am inserting through the CSS pseudoelements :before: and :after is clicked. However, I'm not sure how to do this; my first guess, $(#id:before).click() didn't work. Is this part of jQuery's functionality? If so, how would I select the before / after content? 回答1: jQuery does not support the CSS :before and :after selectors. To select siblings, use .siblings() and then filter from there. http://api.jquery.com/siblings/ 来源： https:/