pseudo-element

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

由 独自空忆成欢 提交于 2019-12-28 01:46:12
问题 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

jQuery and pseudo-elements

由 房东的猫 提交于 2019-12-27 15:41:27
问题 I tried to dynamically change the position of an element which is defined in CSS with :after . Using this: $(function(){ $('div::after').css({'top':'20px'}) }) But it doesn't work. Are there any ways to change the position? 回答1: You can't. Content created by :after or :before is not part of the DOM and therefore cannot be selected or modified. If you have a look at this example fiddle and inspect the DOM in Firebug or similar you will see that the pseudo-element is not present in the DOM tree

:before psuedo element not working on h1 tag

由 痞子三分冷 提交于 2019-12-25 19:05:27
问题 I cannot get the :before pseudo class to insert an icon font before a div containing H1 tags. All the examples I see online use a p or i to insert, however I want to use H1 tags because each tag will have a separate ID and class that correspond to some animate.css fade and delay effect. For simplicity sake I have replaced the font icon with a hash symbol in the example below. The idea is the icon-font will appear before the div, not each h1 tag (this I can do) - in other words; four lines of

How to modify programmatically with javascript the css ::before and ::after [duplicate]

由 这一生的挚爱 提交于 2019-12-25 17:36:27
问题 This question already has an answer here : How do I access style properties of pseudo-elements with jQuery? [duplicate] (1 answer) Closed 4 years ago . I've generated this CSS for a bubble from http://www.ilikepixels.co.uk/drop/bubbler/ .bubble { position: relative; width: 250px; height: 120px; padding: 0px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: #70CAF3 solid 2px; } .bubble:after { content: ''; position: absolute; border-style

::select pseudo-element ignored in fill space, selection going out of bounds…?

由 醉酒当歌 提交于 2019-12-25 05:22:30
问题 I'm trying to apply the non-standard, but pretty widely supported CSS pseudo-selector for setting the text color of selections in the browser. All seemed to be fine at first, and then the ice weasels came. Let's say you have this HTML: <div class="outside"> So what's wrong with this picture? <div class="fancy"> Custom selection color lost on right <div>But only on direct children</div> <div>Divs underneath are ok (?)</div> </div> ...aaand selection bleeds to outside div. :-/ </div> With this

combine :first-line :before

由 五迷三道 提交于 2019-12-25 05:03:16
问题 it is possibile to combine the pseudo-element :first-line and :before? Actually I'd like to have a character before any line of a p except the first one. I try: p:first-line:before{content:""} p:before{content:"["} but it do not work. Thank you for any suggestion. 回答1: It's not currently possible to chain them as you have, nor can I think of a way to append content to every line of a paragraph except the first with just CSS. Further, the content property is only used with :before and :after .

Select pseudo-elements with jquery [duplicate]

由 别来无恙 提交于 2019-12-24 21:39:42
问题 This question already has answers here : Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery (22 answers) Closed 5 years ago . How would you convert this block of css into jquery? .nav li a:first-child:nth-last-child(2):before { content:""; position: absolute; height:0; width: 0; border: 5px solid transparent; top: 50% ; right:5px; } I've tried a couple different ways but nothing I tried worked properly. Where this css selects only before the the jquery

how do I make a text disappear and make different text appear by hovering over another text

由 雨燕双飞 提交于 2019-12-24 05:45:20
问题 How do I make a text disappear and make different text appear by hovering over another text. #a:hover + #b { display: none; } #c { display: none; } <body> <div id="a">Hover here</div> <div id="b">This will disappear</div> <div id="c">This will appear</div> </body> 回答1: So I guess this is what you are looking for: #a:hover + #b { display: none; } #a:hover ~ #c { display: block; } #c { display: none; } <body> <div id="a">Hover here</div> <div id="b">This will disappear</div> <div id="c">This

Why is the pseudo content :after not shown after but in the corresponding div?

由 只愿长相守 提交于 2019-12-24 03:34:15
问题 The following example shows a box div with an :after content, which should be a separate block. div.box { background-color: #FAA; width: 10em; overflow: scroll; } div.box:after { content: "☑"; display: block; background-color: #AFA; width: 5em; overflow: auto; } <div class="box">x</div> But the after content is placed inside the scroll bars. My expectation was that it comes actually after the scrollable area. 回答1: The :after content comes within the scrollable area because even though the

Edge input placeholder not aligned with text

由 好久不见. 提交于 2019-12-24 03:34:06
问题 In all other browsers, the placeholder of my input of type text starts where the cursor is flickering. However, in Microsoft Edge, the placeholder text appears ahead of the cursor. Is there any way to fix this? Expected result: Edge result: 回答1: It seems I found the answer (the sooner I asked it here...) The problem is with the text-indent property. Somehow in Edge it moves the cursor at an inequal distance to the placeholder. Using padding-left: 10px; instead of text-indent: 10px; solves the
订阅 pseudo-element