FAQ Database Discussion Community


Width on :first-line?

css,css3,width,pseudo-element,heading
I would like to have a heading with the first line shorter than the rest of it. HTML Here is some code: <div> <h3>Lorem ipsum dolor sit amet who made up this fake Latin text</h3> </div> CSS div { width: 20em; border: 1px solid #000; } h3:first-line { background-color: yellow;...

Make text not wrap around icon in :before pseudoelement?

css,css-selectors,icons,pseudo-element
I have an icon in a :before pseudoelement, and if the textelement becomes to long and goes to the next row, I want it to not wrap around my pseudoelement but keep it's distance. Here is a link to my example: http://jsbin.com/yosevagaqa/1/edit?html,css,output If you resize the window so that the...

Stop ::-webkit-progress-value animation

javascript,jquery,css,pseudo-element
How can I stop this animation through JS/Jquery? .progressLoading::-webkit-progress-value { box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4); border-radius: 10px; background: -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #963a2d,...

Superscript inside a p:after content tag

css,pseudo-element,css-content
.class { &:after { content: "m3/s"; } } I want to add a unit declaration via :after tag. Is it possible to make the 3 superscript? This obviously doesn't work: .class { &:after { content: "m<sup>3</sup>/s"; } } ...

CSS - ::after has another padding in Chrome and Firefox

css,css3,google-chrome,firefox,pseudo-element
I have a button (tag a) with pseudo element ::after. The problem is that element after looks different in chrome and in firefox Google Chrome: Mozilla Firefox: My code is: <a class="play_button" href="#">Some link</a> a.play_button { background-color: white; text-decoration: none; color: #49bf96; position: relative; padding: 6px 23px 7px 23px; border:...

Using CSS Pseudo-Selectors to achieve a ribbon shape

html,css,pseudo-element,css-shapes,pseudo-class
i have the following structure where multiple elements within a carousel have a numbered badge, the white part above works fine when using white background, but in some situations an image gets behind the badge. Is it possible to make the same effect but with a transparent white space below?...

CSS ::after pseudo element clear not working

html,css,css-float,clear,pseudo-element
Here is a fiddle: http://jsfiddle.net/e4y05yyz/1/ Working on a responsive layout. I would expect that the :after pseudo element would clear both floats and the the element with class .masthead-middle would drop to the next line, but it does not. If I put a clear: both; on the masthead-middle element that...

CSS pseudo after/before using content or background for img?

css,css3,pseudo-element,css-content
As for pseudo-elements :after/:before there are apparently two ways if I want to display image there: using background-image:url(imgurl.png); using content:url(imgurl.png); Are both ways correct and valid? Why should I be using one way over another? Apparently using the second method you cannot set the picture properties like size. But first...

Issue with overflow-x: auto while using pseudo elements

html,css,scroll,overflow,pseudo-element
I am currently designing a timeline in CSS. It has a <section> element with the class "timeline" which should always be 100% width. On smaller devices the content should scroll horizontally inside the <section>. I wanted to use overflow-x: auto but apparently this does not work. https://www.dropbox.com/s/fj0748sevpzoque/Screenshot%202015-02-11%2015.44.29.png?dl=0 This is the...

:before pseudo element acting separately from parent element

html,css,pseudo-element
I have a very similar question to this user, but wasn't able to solve my problem. I also referred to Chris Coyier's tutorial and used his :before pseudo-element approach. However I cannot get the top of the <section> element to reflect the same top as it's :before child. Here is...

CSS: tags disabled after using pseudo elements

css,hyperlink,anchor,absolute,pseudo-element
I'm doing a CSS exercise wherein the old BBC's site is to be cloned. The original problem was that the white bottom borders of the #topmenu li's appeared wonky (I included this code in the page below as a comment) That has been fixed by adding the right red border...

CSS box shadow conflicting with pseudo-element

css,css3,pseudo-element,css-filters
Is there a way to disable the box shadow for the part where the pseudo-element arrow resides? Current: or without the negative z-index on the pseudo-element: Desired result: #element { position: relative; width: 100px; height: 100px; background-color: blue; box-shadow: 5px 5px 5px #222; } #element::after { content: ""; width: 25px;...

CSS ::before ::after pseudo elements dynamic width

javascript,jquery,html,css,pseudo-element
I want to make rate stars progress bar with single div element and css pseudo elements like ::before. Only thing what I can't do is manipulating width of ::before element with Javascript. Here is my example: .review-rate { background-image:...

css :before pseudo element + twitter bootstrap navbar logo

html,css,twitter-bootstrap,pseudo-element
I'm using Twitter Bootstrap. This is a chunk of my header HTML: <a class="navbar-brand" href="#/"> <span>watch.js</span> </a> I have also added following CSS: .navbar-brand span:before { background: url("favicon.png")no-repeat; background-size: 53%; } I want to add a graphical logo in the navbar as a pseudo element (I believe it's easier to...

Odd behavior of :first-letter in Chrome

javascript,css,google-chrome,pseudo-element
Adding what seems to be an innocuous class to an element having a class containing :first-letter causes the first letter, under some circumstances, to be rendered incorrectly. An element originally has class "unindent", and then class "menuitemon" is added. The fiddle http://jsfiddle.net/pgf3reyt/4/ shows this working on one element, and not...

Exclude pseudo elements from hover

css,css3,hover,pseudo-element
How do I exclude pseudo-elements like :before and :after from being changed by selectors like for example: :hover? Maybe there's some sort of 'main pseudo element' that I'm not aware of? I've tried using CSS3 :not() statement but this didn't work. Using: .facebook:hover:before {color: black;} works fine, but I'm sure...

css - parent :before pseudoelement with child alt attribute as content

css,css-selectors,pseudo-element
A series of ul elements contained within separate div elements need to not only have the correct content in their :before pseudo element, but also keep the bold tag titles adjacent to the lists. Additionally, when there are no lists present within the div in question, nothing should appear whatsoever....

Opaque transition using active class

css,css3,css-transitions,opacity,pseudo-element
I need help with CSS. I am trying to make it so a div's opacity is set to 1 when another div is clicked as a transitiion. I can only use CSS so I was trying to find out how I could use the active class to do this or...

Pseudo-element background image doesn't appear

html,css,pseudo-element,css-shapes
I have a div element with a triangle-border and I'm trying to place an image above it using an ::after pseudo-element with background-image. The method doesn't work though. However if I'm trying to set content: "asd";, the text appears correctly. Basically I just want to have a house image above...

Styling pseudo-elements when a link has wrapped?

css,pseudo-element,wrapping
I've created an 'underline' animation that uses an ::after pseudo-element underneath the link. Here is the code for the link and the pseudo-element: Link a { position: relative; } ::after a:after { content: ''; display: inline; position: absolute; height: 2px; width: 0%; background-color: #ce3f4f; left: 0%; bottom: 0px; transition: all...

Pseudo element hover Safari issues

css,pseudo-element
I really hope someone can help me with this one. I have a shape that I'd like to have change background color when hovered over it. I've gotten it to work in all browsers, except Safari. You can see it here: http://jsfiddle.net/bgLv6L9j/5/ I tried using the following code to make...

CSS flexbox wraps content in FireFox (not Chrome)

css,google-chrome,firefox,flexbox,pseudo-element
I have a button that consists of an <i> and an <span> element (an icon and some text). Now both have different sizes so I'm applying a flexbox to my button that should center my items nicely. In Chrome everything works as I expected but using the page in a...

Changing border-bottom to border-top

css,css-transitions,pseudo-element
I want to have a transistion on my menu list when hovered but I want to change the border-bottom to border-top. How can I do this? .sliding-middle-out { display: inline-block; position: relative; padding-bottom: 3px; } .sliding-middle-out:after { content: ''; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition:...

Get Featured Image in pseudo elements( i.e. :before or :after) - WordPress

php,html,css,wordpress,pseudo-element
I want to get WordPress featured image in pseudo elements. I've used it in inline style using following code <?php $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($whatWeDo_post->ID), 'single-post-thumbnail' ); ?> <div style="background-image: url(<?php echo $thumb_url[0]; ?>);"> But I want to use it in pseudo elements...

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

html,css,pseudo-element,css-content
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...

CSS3 Columns and pseudo element positioning

css,css3,multiple-columns,pseudo-element
I've got a page with CSS3 columns, and I am trying to place a pseudo element at the same Y position as the inline element, but at a fixed X position (in the left margin). This works great on the first column, but the rest of these pseudo elements in...

Use pseudo element's content attribute to change img

css,image,pseudo-element
I'm trying to make a twinkling effect using animation and replacing image. And here's my code, please tell me where I go wrong. HTML code <img class="lantern red" src="images/lantern.png"> CSS code .lantern::before { content: url("images/lantern_twinkless.png"); position: absolute; display: block; width: 100%; height: 100% } ...

Can an :after background-image be used to overlap the next element?

html,css,pseudo-element
I have an image that I'd like to add as an :after element to a nav bar. The point being that the :after would cover the top portion of the next section (this is part of the design). The :after is set as position: absolute with a top: 100% and...

Using attr(data-icon) property to display unicode before element

html,css,unicode,pseudo-element,css-content
Lets demonstrate an example with simple HTML code like this: <div data-icon="\25B6">Title</div> I would like this element to have an prefix icon set by it's data attribute (data-icon) so I set CSS file like this: div:before { content: attr(data-icon); } My desired output of this example would look like this:...

CSS counter-reset does not work inside pseudo elements

html,css,pseudo-element,css-counter
The following CSS counter example does not work as expected. The counter for sub-headings should reset after every main heading: body { font: smaller sans-serif; counter-reset: h1 h2; } h1:before { counter-reset: h2; content: counter(h1) ". "; counter-increment: h1; } h2:before { content: counter(h1) "." counter(h2) ". "; counter-increment: h2;...

Firefox quirk: select the first letter when an image is on the same line

css,css3,firefox,pseudo-element
Per MDN's article on the ::first-letter pseudo-element: The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line. (emphasis mine) So, how does one select the first letter...

What does ::before on its own line do in HTML?

html,css,html5,css3,pseudo-element
This might be a stupid question, but if I have something like this: <div id="topDiv"> <header id="headerId" class="headerClass" style="display: block;"> ::before <div>...</div> <div>...</div> <div>...</div> </header> </div> What does this 'before' in the html do? I understand if I do the following in the CSS it adds these properties before every...

Custom ul bullet with pseudo-selector and alignment

html,css,pseudo-element
I made a custom bullet for ul with pseudo-selector. But I want the link text position to be align inside. How do I do that? Here's the link to the Fiddle http://jsfiddle.net/bodyfarmer/13q91433/1/ Css: ul { /* list-style-position: outside; */ margin-bottom: 0; padding-left: 20px; padding-right: 30px; list-style: none; } li:before {...

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

javascript,html,css,pseudo-element
This question already has an answer here: How do I access style properties of pseudo-elements with jQuery? 2 answers 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...

Consistens width of :first-letter with CSS

css,css3,pseudo-element
I’m trying to draw a circle around the first letter of each first paragraph in an article using border-radius and padding, but because of the different widths of the characters, it will be displayed as an ellipse rather than as a circle. Is there any possibility to set width and...

Draw blocks around form elements and add headings using CSS pseudo elements

css,pseudo-element
I have the following html which is generated by a web framework so I can't change it. I can however add my own CSS. <table border="0" class="formlayout" role="presentation"> <tbody> <tr> <td align="right">Medical Aid Plan</td> <td align="left"><input type="text"></td> </tr> <tr> <td align="right">Adult Medical Aid Dependants</td> <td align="left"><input type="text"></td> <td align="right">Child Medical...

How to extend a wrapped element background both left and right with different color?

html,css,pseudo-element
I am trying to Extend a Wrapped Element to the Full Browser Width Using CSS: :before and :after pseudo elements. This is my HTML: <section class="top-banner"> <div class="flash-banner"> <object width="1003" height="121"> <param name="movie" value="img/banner_header.swf"> <embed src="img/banner_header.swf" width="1003" height="121"> </embed> </object> </div> </section> .flash-banner DIV have centered on the page. So...

CSS :before/:after selectors are suddenly being positioned separately of parent div

html,css,css3,pseudo-element
I switched to a new computer, and all of a sudden the CSS :after and :before selectors no longer work. What's truly bizarre is that the :before/:after selectors I added before, on my other computer, display completely normally on my new computer. But any new ones I add now simply...

CSS pseudo elements in React

javascript,css,reactjs,pseudo-element
I'm building React components. I have added CSS inline in the components as suggested in this brilliant presentation by one of the guys behind React. I've been trying all night to find a way to add CSS pseudo classes inline, like on the slide titled "::after" in the presentation. Unfortunately,...

Placing anchor's text above its absolutely positioned pseudo element

css,z-index,pseudo-element
Is it possible to turn this: into this? Ie. placing the anchor's text above its absolutely positioned arrow pseudo element. The only solution I can think of is wrapping the anchor text in a span and then absolutely positioning that again over everything. But is there a way to do...

Beautiful Header Shapes Using Pseudo:Before Trick, Adding SPACE

css,pseudo-element,shapes
With a little help, it's almost GORGEOUS: TheZoo.com/shapes Except, there is no space between the header icon and the text, which I want to control. So how do I add margin (or padding) to a css pseudo:before shape, while AVOIDING extra markup, spacer div or other elements, relying purely on...

anchor element not working when :before pseudo element

html,css,anchor,pseudo-element
I have applied some styles on the parent :before and the anchor element inside doesn't work anymore. It seems that something is overriding the default behaviour of the anchor element but I can not figure out what. How can I fix this? .ugallery_item:before { content: ""; position: absolute; top: 0;...