Questions tagged [pseudo-element]
CSS pseudo-elements allow for an enhanced display of content within elements or the ability to generate extra beginning or ending content for elements.
pseudo-element
2,231
questions
1
vote
0
answers
64
views
Tailwind CSS and Next.js: Local Images Not Rendering with Pseudo Elements
I'm working on a project using Tailwind CSS and Next.js. Despite extensive research, I've encountered an issue I can't resolve.
The Problem:
I am trying to use pseudo-elements ::before and ::after to ...
- 11
0
votes
0
answers
39
views
fit-content doesn't work on ::before element?
::before pseudo-element on a span is wrapping itself.
span {
position: relative;
font-size: 1rem;
}
.float-left {
display: block;
}
.float-left::before {
content: "Float: Left --&...
1
vote
0
answers
44
views
How to select pseudo element in react typescript using useRef
I'm trying to select pseudo element in React typescript.
define ref
const header = useRef<HTMLDivElement>(null)
set ref
<div className={classNames(style.header)} ref={header}>
but I don't ...
0
votes
2
answers
75
views
CSS Grid with possible content
I have a paragraph with some text, a possible span, and some :before and :after psueodo-content:
<p>Normal content without a span</p>
<p>Additional content with a <span>span<...
- 15.6k
0
votes
1
answer
27
views
::before Pseudo-element Not Displaying Below Form Despite z-index -1 Setting [duplicate]
I have a problem where an element created with ::before is not appearing below a form. Even after setting z-index to -1, it doesn't work. How can I fix this issue?
.form::before {
content: "";
...
0
votes
1
answer
27
views
How do I move my HTML border forward of my animated image?
Currently, I have a border surrounding the HTML of my website, so that it surrounds all content on every page. However, on my home page I have an image that slides in when the page loads and currently ...
- 11
0
votes
1
answer
39
views
CSS `::first-line` Not Respecting `letter-spacing` in Nested `a` Tag
Consider the following simple example:
::first-line {
font-variant : small-caps;
letter-spacing : 0.08em;
}
<p class="fancy">
Lorem ipsum
<a href="">dolor sit</a>
...
- 15.2k
1
vote
1
answer
29
views
Make custom list markers using "::marker" and "content"
I try to create a list with custom list markers.
This is an example from MDN:
li::marker {
content: '✝ ';
font-size: 1.2em;
}
<p>Group known as Mercury Seven:</p>
<ul>
<...
user22996855
0
votes
1
answer
49
views
Using '::marker' pseudo-element to create Markdown-like headings
This works,
h1::before{content:'# '}
h2::before{content:'## '}
<h1>Level-1 heading</h1>
<h2>Level-2 heading</h2>
but I have a feeling it would be more correct to use ...
user22996855
0
votes
0
answers
10
views
why z index not working on :after position absolute and parent position relative
I want to create background using pseudo element :after, and I use z index to set the order so that it is below the other elements, but not working.
Thanks in advance.
body {
background: #000;
...
- 65
0
votes
0
answers
73
views
How to click pseudo element using Playwright?
I have a <input type="search"> element,
and I'm trying to click the clear pseudo element using Playwright-typescript.
I've managed to make it visible manually using these instructions,...
- 1,317
0
votes
0
answers
15
views
SASS, @extend, pesudo element in parent selector
Given the following example third-party SCSS style definition:
// third-party style definition I'd like to re-use
.third-party {
color: blue;
&:hover {
color: red;
}
}
I can use @...
- 39
-2
votes
2
answers
49
views
How to create border as per attached image
pseudo border image
I want the borders connecting the checkboxes.
I tried with pseudo borders, but was having difficulty in setting height as website is responsive for different screens.
Can anyone ...
- 1
0
votes
2
answers
102
views
Why does the :has pseudo selector not work with a list of elements?
I have a div block with a class "help-image" that contains an <img>, inside a section with a class "help-section".
Using the :has selector as follows works fine:
section.help-...
- 21
1
vote
1
answer
47
views
Grouping pseudo elements breaks CSS [duplicate]
The code below works fine.
input[type="range"]::-webkit-slider-runnable-track {
background-color: #000;
}
input[type="range"]::-moz-range-track {
background-color: #000;
}
<input type="...
- 5,840