css-content Questions

10

Solved

How do you use the CSS content property to add HTML entities? Using something like this just prints   to the screen instead of the non-breaking space: .breadcrumbs a:before { content: '&a...
Lollard asked 10/10, 2008 at 7:19

5

Solved

Is it possible to have multiple :before pseudos for the same element? .circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; } I a...
Doak asked 17/8, 2012 at 1:15

3

I don't have much experience on UI development. I have a class defined in CSS, something like this- .myclass { color: red; content: "my content"; font-size: 12px; padding-right: 2px; } I wan...
Memorialist asked 20/4, 2015 at 8:51

5

Solved

Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like: .header:before{ content: '<a href="#top">Back&...
Redemptioner asked 22/12, 2010 at 0:1

21

Solved

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gi...
Oralle asked 6/4, 2010 at 19:28

3

Solved

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...
Borne asked 7/5, 2015 at 10:2

5

Solved

Is it possible to have a new line in a data attribute ? I am trying to do something like this: CSS: [data-foo]:after { content: attr(data-foo); background-color: black; } HTML <div data-...
Bookstack asked 8/5, 2013 at 22:53

3

Solved

This is in addition to my recent question: Is it possible to use pseudo-elements to make containing elements wrap around an absolutely-positioned element (like a clearfix)? JSFiddle: http://jsfidd...
Krissykrista asked 20/2, 2013 at 11:33

3

Solved

On my website I'm using font icons for certain link types. These icons are added via :before CSS syntax. a.some-link:before { font-family: icons; display: inline-block; padding-right: 0.3em; c...
Flotation asked 13/2, 2013 at 10:24

5

Solved

Given the following scenario, why does the :after selector require a content property to function? .test { width: 20px; height: 20px; background: blue; position:relative; } .tes...
Anecdotal asked 12/6, 2013 at 14:18

2

Solved

How can I get this effect: <pre class="default prettyprint prettyprinted" data-codetitle="homepage.html" style=""><code> body{ position: relative; @include background(linear-gradien...
About asked 30/3, 2013 at 18:9

10

Solved

I am trying to centre the link with the image, but can't seem to move the content vertically in any way. <h4>More Information</h4> <a href="#" class="pdf">File Name</a&...
Tertiary asked 14/5, 2010 at 9:22

3

Solved

From what I understand, :before and :after inserts content before or after the indicated target. I'm not really sure what would be the purpose of this CSS snippet? *, *:before, *:after { -moz-box...
Commie asked 8/5, 2014 at 13:3

3

Solved

I am using the following CSS, which seems to be working: a.up:after{content: " ↓";} a.down:after{content: " ↑";} The characters however cannot seem to be encoded like this, as the output is lit...
Keslie asked 17/2, 2011 at 14:56

1

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 fo...
Shanika asked 19/3, 2016 at 19:28

2

Solved

I'm looking for a way to add an HTML tag for CSS content property inside :after and :before. Unlike this question which only discusses adding symbols like <. What I'm trying to add is something...
Schaffner asked 19/3, 2014 at 15:59

3

Solved

My paragraph has a height/line-height of 50px and text-align: center, which centers the text. But p:before is causing it to increase in height/line-height, causing the text to bump down. I want bot...
Officious asked 17/10, 2013 at 23:33

4

Solved

None of the following code works: p:before { content: " "; } p:before { content: " "; } How do I add white space before an element's content? Note: I need to color the...
Allay asked 14/5, 2013 at 20:36

2

Solved

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....
Irvinirvine asked 26/4, 2018 at 10:29

2

Solved

As the title says, is there a way to style an iframes pseudo before/after? Without wrapping the iframe with another div, or else?` I tried to style it like any other element, but no success: ifra...
Paraph asked 5/6, 2013 at 14:58

4

Solved

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 attrib...
Kairouan asked 7/3, 2017 at 8:13

2

Solved

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...
Shelburne asked 29/11, 2016 at 11:29

1

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() */ backgro...
Eleonoraeleonore asked 4/11, 2016 at 14:50

2

I've got a CSS element set up to insert some content, via: .foo:after { content: "Bold, italics"; } I'd like the word "Bold" to be rendered in a bold font-weight and the word "italics" to be re...
Jenijenica asked 24/7, 2015 at 22:5

5

Solved

In some template I see that an arrow that created with CSS. something like this: div:after{ content:"\f107"; } this code display an arrow like this : what is this code? where I can find more...
Carvalho asked 26/11, 2013 at 7:2

© 2022 - 2024 — McMap. All rights reserved.