CSS Content Property Not Displaying

CSS content property not displaying

content is used with :before or :after like so:

div:after
{
content: "Hello, world!";
}

Regardless, I've only used content for special cases (to clear floated elements, for example). I've never actually used this to insert content. You generally want to separate content and presentation anyway, so I think this is a bad idea. Which book are you reading? :)

CSS: content not displaying

I guess you should have a look at this class

.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
background: url(images/arrow-down.png) no-repeat;
height: 16px;
position: absolute;
right: 5px;
text-indent: -9999px;
top: 13px;
width: 16px;
}

the text-indent property causes the >> to go AWOL. Remove that and you are kinda set. You may have to toggle other classes though.

As for the drop down indicators, they are very much present, just remove the background:none

On that note, content property is usually set to ::before and ::after pseudoelement. Do have a look into this mdn link .

CSS content is not working

The CSS content property can only be used with ::before and ::after pseudo-elements. You could work around this by creating a child element which only has styles on ::after for example, and also includes the content property for the text that is dependent on resolution via media queries.

css 'content' feature not showing

The content property is exclusive to the ::after (:after) and ::before (:before) selectors.

#yourElement:before {
content: "your content";
}

Height and width not working on CSS Content property

One possible way to achieve the required effect is by adding a pseudo-element (div:after in this case) with a border-bottom and then position the pseudo-element and the span containing the text in such a way that the span's border (white or the same as the background color) overlaps with the border of the pseudo-element. The span text is center aligned so as to give the effect that there is a line before and after it whereas actually the line is there for the full div but just that the part under the text is made hidden.

Note: I have not answered the original question because that is already covered in Tim and chipChocolate.py's answers. In essence, when you create the line using the content tag, you need to consider the line as a text and use the font-* properties to increase its size.

div {  position: relative;  text-align: center;  width: 200px;  margin-bottom: 10px; /* just for demo */}.small{  font-size: 0.75em;}span {  display: inline-block;  padding: 0px 2px; /* the more the padding the more the space between text and line */  border-bottom: 2px solid white;}div:after {  border-bottom: 2px solid black;  width: 100%;  position: absolute;  content: '';  height: 100%;  left: 0px;  top: -2px;  z-index: -1;}
<div>  <span>Text</span></div>
<div> <span>Lengthy Text</span></div>
<div> <span>Very Lengthy Text</span></div>
<div class="small"> <span>Smaller Font</span></div>

Div with CSS content, after pseudo element is not visible

The content property replaces all content within the element. By adding content to a non-pseudo selector, that content will replace the ::before and ::after pseudo selector.

So try doing this using the content property within the ::before and ::after pseudo selectors only.

.demo:before {     content: url('http://placehold.it/350x150')}
.demo:after { content: 'some text'; display: block;}
<div class="demo"></div>

Why is CSS content image not displaying?

This property content is used with the :before and :after
pseudo-elements to generate content in a document. -W3C

I think the behavior in Firefox is correct.

CSS Content property doesn't work in MSIE?

I agree with GCYrillus, I too think it is bad practice and may not work in all browsers (as your post suggests). If you want to control the picture based on a class try adding a background picture instead of the content property.

.pegi18 {
background: url("http://daylostar.com/img/gwt/pegi/18.png");
width: 50px;
height: 61px;
}


Related Topics



Leave a reply



Submit