pseudo-element Questions

12

Solved

I'm re-asking this question because its answers didn't work in my case. In my stylesheet for printed media I want to append the url after every link using the :after pseudo-class. a:after { cont...
Sickler asked 6/8, 2009 at 13:26

9

I'm trying to make a search bar that will look nice. What I did is, I made an image of an search bar and I'm adding the image to the back-ground of the input and I'm editing the place and the size ...
Penates asked 27/12, 2013 at 16:21

6

Solved

I'm searching online and I didn't find anything. I'm trying to update the placeholder color of a textbox using javascript, but how can I do that? I have a color picker and the color is changing. I...
Metacarpus asked 18/2, 2019 at 14:26

5

Solved

I have a div called .testimonial-inner and using the :after pseudo element I have an arrow that sits underneath it pointing down. The problem I'm having is adding a box-shadow to it all so they bot...
Tao asked 19/1, 2015 at 21:17

6

Solved

I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would n...
Atlantes asked 2/10, 2012 at 14:54

2

Solved

There are a bunch of pseudo elements and classes: Pseudo Elements: ::after, ::before, ::first-letter, ::first-line, ::selection, ::backdrop Pseudo Classes: :active, :checked, :default, :di...
Humpage asked 10/7, 2015 at 6:34

2

Solved

I'm trying to change the background color of a dialog element's backdrop using a custom CSS property but it won't take. Is this a bug in Chrome or is there a reason for this? document.querySele...
Bradshaw asked 12/11, 2019 at 12:1

3

Solved

I want to know whether it is possible to get a DOM element's ::before content, which was set by CSS3. I have tried some ways, but I still can't make it, so it's very confusing to me! // https://r...
Davilman asked 3/6, 2017 at 8:42

9

Solved

I have code like this: span { border-radius: 50%; background-color: #d8d9dd; border: 6px solid #262c40; width: 25px; height: 25px; margin: 30px 0 0 40px; display: block; } span...
Xever asked 24/11, 2016 at 16:33

6

Solved

I have a div element with a CSS pseudo-element ::before used as a close button (instead of using an actual button). How do I apply an event listener to only the pseudo-element? HTML <div id="b...
Pisces asked 22/2, 2012 at 13:35

12

Solved

I didn't find any built in solution or workaround for closing the html5 <dialog> element by clicking on its background(::backdrop), although it's clearly a basic functionality.
Yea asked 16/9, 2014 at 8:42

16

Solved

Suppose I want to decorate links to certain file types using an image. I could declare my links as <a href='foo.pdf' class='pdflink'>A File!</a> then have CSS like .pdflink:after { ...
Foskett asked 23/1, 2012 at 20:14

4

Solved

p::first-line { text-transform: uppercase; } <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ...
Allysonalma asked 6/8, 2016 at 8:55

3

Solved

Since there are no spaces in between the <span> elements, I expect them not to wrap but all sit on the same line, which seems to be the case in all browsers span { position: relative; } ...
Echinate asked 12/6, 2023 at 17:42

4

Solved

I'm experimenting with some styles on <textarea>s and I tried doing some stuff with ::before and ::after selectors and I couldn't to anything to get them to work. So the question is: is this ...
Roark asked 20/7, 2010 at 4:16

28

Solved

Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery? For example, my stylesheet has the following rule: .sp...
Dodd asked 18/2, 2011 at 12:53

6

I need to get :after and assign it to variable. It is possible? querySelectorAll doesn't work. alert(some_div_with_pseudo.querySelectorAll('::after')[0]) // undefined
Commorant asked 10/8, 2016 at 11:33

8

Solved

Here is a fiddle. <p>foo <a class="infolink" href="#">bar</a> baz</p> and a.infolink::before { content: '?'; background: blue; color: white; width: 20ex; height: 20...
Pinard asked 31/12, 2013 at 14:6

3

What's the best way to position one pseudo-element directly on top of another pseudo-element? Let's say I want to make a fancy "checkbox" appear next to label here: label:before { content: ...
Harley asked 16/10, 2013 at 23:20

9

Solved

I would like to use a switch for the layout of paragraph tags on a webpage. I use the after pseudoelement: p:after {content: url("../img/paragraph.gif");} Now I need to remove this CSS code fro...
Fa asked 10/6, 2010 at 8:16

3

Solved

.posts .img-hover:before { content: ''; display: block; opacity: 0; -webkit-transition: opacity 1.2s ease; -moz-transition: opacity 1.2s ease; -ms-transition: opacity 1.2s ease; -...
Stedman asked 14/9, 2016 at 11:15

8

Solved

I'm building React components. I have added CSS inline in the components as suggested in this brilliant presentation by one of the people behind React. I've been trying all night to find a way to a...
Lioness asked 2/2, 2015 at 0:42

12

Solved

First time really using the pseudo :after selector. Not sure if the problem I'm running into is a limitation of it or I'm just missing something obvious. Here's my live code. li.current:after { bo...
Curran asked 29/5, 2013 at 16:3

5

I researched on SO about *(Asterisk) and I have found that it selects all elements and applies styles to them. I followed this link, Use of Asterisk and I noticed that this code will apply border ...
Frannie asked 27/9, 2015 at 7:40

11

Solved

I would like to use ::before to place SVG images before some selected elements: #mydiv::before { content: '<svg ... code here</svg>'; display: block; width: 22px; height: 10px; margin...
Jalousie asked 8/10, 2013 at 18:17

© 2022 - 2025 — McMap. All rights reserved.