Questions tagged [css-content]

CSS Generated Content allows us to insert and move content around a document. We can use this to create footnotes, endnotes, and section notes, as well as counters and strings, which can be used for running headers and footers, section numbering, and lists.

Filter by
Sorted by
Tagged with
0 votes
1 answer
109 views

React Native: Resize an image and put it in the top of the screen

I want to resize the image to fit my desired width and height and put it in the top. This is my code: <View style={{ flex: 1 }}> <Image source={TOP_START_GRAPHIC} style={styles....
moonspace's user avatar
-1 votes
2 answers
65 views

How to make font awesome icon appear when setting it in content of css [duplicate]

Having this snippet: .my-style { padding: 0; list-style-type: none; } .my-style i { margin-right: 5px; } .my-style li { margin-bottom: 8px; } .my-style li::before { content: '\f00c'; ...
Leo Messi's user avatar
  • 5,437
1 vote
3 answers
1k views

Is it possible to add "aria-hidden" for css content property?

I have a decorative element in the header that separates links "|". It is added as a CSS content element: ::after { content: "|"; ..... } In HTML it is presented inside of ...
ABC's user avatar
  • 53
0 votes
2 answers
137 views

Classic HTML blockquote consisting of top and bottom centered special character

I am trying to style a classic blockquote, where the bottom and top border contain a special character such as ≋ ≍ ≡ ∼ ⨌ ⫗ ⁗ ∾ ∿ centered on its own box with a background color that goes over the top ...
Sam's user avatar
  • 15.3k
0 votes
1 answer
447 views

How do I override the CSS content property of a pseudo ::before/::after element?

This question is not a duplicate, though it might appear so to someone not reading very carefully. This is not a question about CSS specificity, nor is it about the !important directive (I don't think)...
Eric Hepperle - CodeSlayer2010's user avatar
2 votes
1 answer
288 views

CSS image content not working in Safari and on mobile Firefox

Not sure if this is a browser compatibility issue or what. I have a page with an IMG tag that's set with one .png file as its SRC attribute, and a second, separate .png file set as the CSS 'content' ...
1337ingDisorder's user avatar
3 votes
1 answer
365 views

How to make svg added as css ::after content scale to the size of the font

I have some generated html that has headers with appended anchors (no content, but with a unique id), and I'm adding a 'link icon' that pops up when you hover the header to make it easy to get a link ...
infogulch's user avatar
  • 1,202
1 vote
1 answer
51 views

css content element not showed in if display=flex

I have a line describing the full company address. It is made with different pieces <div><b>COMPANY</b>&nbsp;•&nbsp;Address,&nbsp;City&nbsp;•&nbsp;VAT 12345678901&...
Paolo Di Pietro's user avatar
0 votes
1 answer
202 views

Using regular expression in CSS pseudo element

Not sure this is possible with CSS only, can the content of a pseudo selector contain a regular expression? In this scenario: .normal-class::before { /*content: attr(class); => this works, ...
prettyInPink's user avatar
  • 3,291
-1 votes
2 answers
1k views

Edit colour of text within CSS content

I would like to change the color of some text but the text is in the CSS property 'content'. Is there a way to select specific words and colorize them? For example here is the code I have .info:before ...
randomuser37487593's user avatar
0 votes
3 answers
154 views

How to cancel the inheritance of the "li:before {content: 'text'}" without reassigning it for each <li> element?

everyone! The general goal is that all li elements for which a property is not explicitly declared use the standard value. I don't understand why the content property can't be reset: ul { ...
isNaN's user avatar
  • 11
1 vote
1 answer
176 views

HTML IMG with CSS content invisible without ALT tag

In Firefox 88, CSS-styled images are invisible when they don't have an alt tag. Is that a bug in the browser or is that incorrect HTML/CSS? img.wikipedia { content:url("https://upload....
Konrad Höffner's user avatar
2 votes
1 answer
111 views

Is CSS content supposed to be shown if it includes an undeclared CSS variable?

The following CSS code will generate different results depending on whether or not variable --test2 is defined: html::before { content: "test1:" var(--test1) " test2:" var(--test2); } If ...
End Anti-Semitic Hate's user avatar
0 votes
1 answer
36 views

Pseudoelement's content doesn't get updated in IE11

I have the following code: someSelector:after { content: attr('data-some-data'); /* ... */ } Everything works fine (the value is reflected on the screen) until I change this attribute to ...
gribvirus74's user avatar
0 votes
1 answer
843 views

CSS content attribute: loading text from a TXT file

I need to know if it's possible to load text from a TXT file with the CSS "content" attribute? I searched around and didn't find anything. I have the following CSS: .custom div.ot-loginPageCopyright:...
Brien Halstead's user avatar
0 votes
1 answer
422 views

Add svg to content property

I want to add the svg link inside the content property. Can I do it? .selectedItem::before{ content: " any svg link ";
by-brt's user avatar
  • 35
1 vote
2 answers
105 views

Is the height of a picture that is inserted by ::before or ::after controllable? [duplicate]

I used ::before or ::after to insert a picture. The code in CSS is like this: p::before { content: url(../image/xs.jpg); } or p::after { content: url(../image/submit.png); } When I inspect ...
uoay's user avatar
  • 306
0 votes
1 answer
302 views

Using css pseudo element in php doesn´t work

My issue is that I had to add in php the tag in order to put there some styles with pseudo element span: before and a content: 'text' in which I have a translation for serveral languages. Of course, ...
cperezsola's user avatar
1 vote
1 answer
2k views

Google Chrome Dev Tools remove element's :after from DOM when :after display is none

My problem is about Google Chrome Dev Tools when I want to set display: none; to an after in DOM for a moment but Chrome remove all afters elements from DOM and I can't access to them again. My Chrome ...
nyn05's user avatar
  • 550
5 votes
2 answers
1k views

Convert arabic numerals in roman numerals in pure CSS

I'm writing a custom theme for a website, so I cannot use Javascript. I would like to convert some numbers to roman numerals. I tried this: .score:before { counter-reset: mycounter attr(score ...
Antoine Pietri's user avatar
0 votes
2 answers
61 views

Do CSS rules exist for placing content within elements and positioning them?

Do CSS rules exist for placing content such as images or text within elements? eg. say I have a div which can contain some info which is correct and some info which is wrong, can I have rules such as:...
vfclists's user avatar
  • 19.4k
-2 votes
1 answer
89 views

vertical align :after with multi line text

I have a list of items. An item has a title and text. After the text I want a 'checked icon'. This icon must be aligned to the right and in de middle of the text. The problem now is that the icon is ...
Babulaas's user avatar
  • 770
89 votes
2 answers
5k views

Why are double quotes shown only for the first element?

I am wondering why the browser shows double open quotes only for the first element. The second element has single quotes instead. a::before { content: open-quote; } <a href="http://www....
Pavan Tiwari's user avatar
  • 3,117
2 votes
2 answers
589 views

How to style the last char from input text in CSS?

I have the following snippet which styles one input text element as follows: Every written char will be placed into a special square box. The problem is that appeared a strange behaviour when I wrote ...
user9549074's user avatar
1 vote
3 answers
95 views

Different content for each "::before" pseudo-element

How can we give different content to each ::before pseudo-element? My code looks like this: .timeline h1::before { position: absolute; font-size: inherit; left: 0; } .timeline h1:...
Shabrina Fitri's user avatar
-1 votes
1 answer
320 views

Mixed inline and block positioning of div content

What I want to acheive, by applying css styles is composition of content: I apply my style and I got result: li { position: relative; list-style-type: none; border: 1px; border-color:...
lissajous's user avatar
  • 401
1 vote
0 answers
118 views

Detecting css-content induced changes

Suppose we have some CSS which adds text via content:, like: :after { content: "Something"; } It seems MutationObserver is blind to text changes induced by such content CSS elements. The text is ...
Ofek Shilon's user avatar
  • 15.2k
2 votes
2 answers
4k views

How do I put character &#8226 ::before an element? [duplicate]

I want to put a circle/dot ::before an element &#8226 • nothing I am doing is visible! .line ::before{ content:'&#8226'; } and .line ::before{ content:'•'; } (I see ...
Ben Muircroft's user avatar
3 votes
1 answer
3k views

Using CSS attr() with styled components

I'm trying to put a percentage figure inside an svg circle using the css content attr function, like so: content: attr(data-percent)%; The pseudo element won't render because Styled components ...
D-Money's user avatar
  • 2,415
0 votes
3 answers
37 views

Centering container in CSS, after deleting a 4th box

I have deleted a 4th box as i only need 3 and want the centre the 3 boxes. Here is an image. This is my CSS Code. Below is the HTML code, Keeps saying there is too much code so I am filling up this ...
Cyclingjas's user avatar
3 votes
1 answer
4k views

Handling paragraphs inside list items with a custom CSS content

This is how a paragraph looks like inside a non-styled list item (<li>): <li> <p> hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe ...
David Gomes's user avatar
  • 5,745
2 votes
1 answer
475 views

Children :before content inheritance

The title might be a little bit confusing but I wonder why is it impossible for a child element to inherit it's parent ::before content. for example: HTML: <div class="foo"> <div class="...
user avatar
1 vote
2 answers
1k views

Changing CSS Unicode Content Property Dynamically

I am setting up a background in a div tag that is a font awesome icon in each row of a table. This icon depends on the object that is being displayed. I tried setting up the code similar to Changing ...
ChristyPiffat's user avatar
1 vote
1 answer
991 views

Escaping special chars in CSS "content" property?

I have a menu with country flags and use the CSS content property to add the name of the language. I.e. like this: a.flags::after { content: 'Español'; } This is pretty straightforward, but the ...
DTX's user avatar
  • 182
3 votes
1 answer
1k views

How could a web spider crawl the content in ::before?

The content in a pseudo element such as ::before or ::after actually not exists in the DOM tree. So, It's impossible to locate it by selector. The question is, how could I extract the content in it? ...
Sraw's user avatar
  • 19.1k
0 votes
1 answer
342 views

Making content appear below the :before pseudo selector?

I have an element <div class="Test_then">The result is ...</div> The Test_then class looks like this: .Test_then::before { content: 'Then'; } My goal is to have the (The result is ......
Ole's user avatar
  • 42.8k
10 votes
4 answers
12k views

Div with CSS content, after pseudo element is not visible

I have a POC that I have to complete and I am only allowed to use CSS to update the styles of a product. I have replaced one of the images of the product with a logo by using the CSS content ...
ICodeGorilla's user avatar
0 votes
2 answers
92 views

Semantic way of stacking two characters in a ::before element?

I'm trying to add checklist symbols to the left edge of table cells. So far, this does work. When I'm trying to stack another char on top of the checklist symbol though, things get ugly. I have found ...
Tatjana Heuser's user avatar
7 votes
2 answers
1k views

Why I can not use space after on :before :after content when using unicode

I just was wondering why in CSS when using unicode I can not put space after unicode : This is my test : div {font-size:50px;} div:before, div:after {color:green;} .a:before {content: 'text-...
l2aelba's user avatar
  • 21.6k
6 votes
1 answer
11k views

CSS make background-image use font character

I'd like to use a font character (e.g. from font-awesome) as a background-image of an input element. <style> #id { background-image: content('\f2d3'); /* content instead of url() */ ...
casenonsensitive's user avatar
0 votes
2 answers
829 views

Changing content of the <title> element with pseudo-element

What i want To change contents of html 'title' element by selecting it via '::before' pseudo-element and applying 'content' attribute to selection. Problem I have a webpage: <html> <head> ...
Petteri Knihti's user avatar
0 votes
1 answer
2k views

CSS selector and content property to add a space character between two inline-block elements

I have a series of span elements of class tag (from bootstrap v4) which are adjacent to each other without any space between them because they come from a reacj.js array of JSX elements : <span ...
beeb's user avatar
  • 1,197
8 votes
1 answer
5k views

Is it possible to use CSS Custom Properties in values for the content property?

Example: :root { --PrimaryThemeColor: #3acfb6; /* with or without quotes */ } .ColorSwatch:after { content: var(--PrimaryThemeColor); } When this is rendered, the computed CSS is literally ...
Kevin Suttle's user avatar
  • 8,388
1 vote
2 answers
2k views

How to gain hanging indent list with CSS Counters?

I'm trying to build a 3 level ordered list with CSS counters. ol { counter-reset: paragraph; list-style-type: none; margin-bottom: 1em; font-weight: bold; } ol > li::before { counter-increment: ...
Denis Giffeler's user avatar
2 votes
2 answers
4k views

CSS: Using data attribute as content URL

So I have a div that allows me to display a QR code of the current page URL: .page-qr:before { content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo ...
MultiDev's user avatar
  • 10.4k
4 votes
1 answer
248 views

Find a text generated by "content" CSS property [duplicate]

https://jsfiddle.net/2gf6gq0s/ I use ::after pseudo-element to insert text in my document: <div class="foo"></div> <div>test</div> <style> .foo::after { content: "...
john c. j.'s user avatar
19 votes
1 answer
2k views

How did CSS `content` property work for `img` element in WebKit?

Long time ago there was a draft of CSS3 Generated Content spec which allowed the content property for any HTML element (not only ::before/::after pseudo-elements), without any formal restriction for ...
Ilya Streltsyn's user avatar
0 votes
1 answer
77 views

Adjacent content: url() table elements result in incorrect table layout

I have a 3-column x 2-row table layout. Each row has two elements populated by content:url() In the first row, they are separated by an empty element and layout correctly In the second row, they are ...
Jason's user avatar
  • 9,638
2 votes
1 answer
94 views

Css before/after selector content can't contain the same attribute more than once [closed]

It seems that the content of a before / after selector can't contain the same attribute more than once. Example: Let's say we have a div with the name "24". When writing this: content: attr(name) ' ...
Cinzel's user avatar
  • 215
0 votes
1 answer
75 views

Avoid applying style to :after when using :hover [duplicate]

I am using :after to allow myself a border with a radius and a gradient, like: #main .element { border-radius: 10px; background: #FFF; } #main .element:after { border-radius: ...
William Paul's user avatar