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
Bootstrap-Affix: Div Underneath Affix "Jumps" to Top. How to Make It Smoothly Scroll Behind
Horizontally Center <P> Within a Div While Keeping The Text Left-Aligned
Selecting Children Elements But Not Grandchildren
How to Change Twitter Bootstrap Background Color
CSS3 Multi Column Layout Ie Workaround
How to Make Cross Browser Gradient Mixin in Compass, with Ie9, Ie8, Ie7 and Opera
Angular: Transclusion, Set Color of Svg Element
How to Center and Middle a Figure in HTML Xaringan R
Embedded Fonts Render Then Disappear
CSS Selector for Multiple Sub-Elements
Please Explain Rowspan and Colspan, Col and Colgroup
Sass Is Concatenating Instead of Adding
How to Remove Extra Space After a Colon in CSS with Sublime Text 2
CSS Terminology: What Are These Called
Which Framework Is Best for Starting with Responsive Web Design