how to show css text in html div


Tags: css

Problem :

I am trying to show the information in the notice class.

I have try adding content: but this doesn't work.

.notice {
color:red;
content: "information below are instructions for this method for this page";
}

<div class="notice"></div>

I was wondering if the text in the content can be shown in the div?. I want to show actually what is in the notice class whenever I call the notice class. I have about 40 pages I need to do this to and some people might thing I should just type it in all pages but that information in the content changes.

Is they a way to do this in css?



Solution :

The content property only works on the :after and :before psuedo classes, e.g. try:

.notice {
color:red;
}
.notice:after{
content: "information below are instructions for this method for this page";
}

<div class="notice"></div>

See this fiddle

That said, CSS should be kept for styling and not content - which should be output in your HTML, and controlled by either whichever serverside tech you're using (e.g. PHP, Python), or a JS bridge.


    CSS Howto..

    2 divs aligned side by side, how to make right div fill width 100%?

    Once I've designed a navigation bar using CSS & html — how can I put the html code in one place so it shows in each window? [duplicate]

    How to make a list of “background-image” CSS using WebDriver with Java

    How to use css selector with class prefix by dojo?

    How to use CSS to make images in multiple li of one ul align by bottom edge?

    How to use JavaScript to Alter CSS for Multiple Elements

    How should you comment css? [closed]

    How to make a text flash in html/javascript?

    How do I style hyperlinks separately, using CSS?

    how can i make the li inside the div be horizontal?

    How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

    How to turn off materialize css containers when on mobile?

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to display .entry-content CSS on Wordpress home page?

    jquery .show() hides immediately

    How to do fallback for browser-specific css expressions

    How to set a menu hover delay

    CSS: How to get lines to “line up” accross different columns?

    How to extend a div's width beyond its wrapper?

    hover div to show another div

    How can I position two to always be side by side

    How to overlap divs using CSS?

    How to select the las Li with Xpath or Css Selector

    how to define minimum height for tbody in css

    How to draw child element's border outside its parent in CSS (or simulate this effect)?

    HOW TO check if an external (cross-domain) CSS file is loaded using Javascript

    How do I create a full screen click target to work with CSS-only navigation menu with :target?

    How to edit a pseudo element on focus using css or jQuery

    how to make website more user friendly for mobile users [closed]

    how to create two columns with div and CSS