CSS "content" is not working

Question

I would like to add the text for the paragraph through CSS rather then in the HTML, because it's a subject to change with the responsiveness of the website.

Now I can't get it to work, and I am wondering if there is something wrong with the CSS?

Also, is this the only way this could be done (with pure HTML and CSS) or is there another way to target a text and change it with every resolution?

HTML:

<p class="title"></p>

CSS:

p.title {
        width: auto;
        height: auto;
        position: relative;
        float: left;
        clear: none;
        margin: 40px 0 0 0;
        padding: 0;
        display: block;
        font-family: 'Fjalla One', sans-serif; 
        font-weight: 400; 
        font-size: 36px;
        color: #d76e50; color: rgba(215, 92, 52, 0.9);
        cursor: default;
        content:"TITLE GOES HERE";
}

Answer 1

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.

Answer 2

CSS is not the place to put content, even if you do want the content to change as part of your responsive design.

The whole point of HTML/CSS/JS is to have a separation between content, styling and scripting. Putting content into CSS or styling into HTML breaks that, no matter what your intentions are.

But to directly answer your question: CSS content is only valid in a very few cases. It is not available on general selectors (precisely because of the points I made above).

content is only available for selectors that result in pseudo-elements being added to the page. In practice, this means that you can only really use content with ::before and ::after selectors.

And even in these cases where you can use it, you should still not be using it in the way you've described. With ::before and ::after, it is not intended for putting actual content into your CSS; it is meant really just for tasks like inserting a marker next to something, such as the little symbol you get next to external links in sites like Wikipedia. That kind of thing is still styling, and is thus correct to be in CSS, even though it does add 'content'.

Note that content inserted using ::before and ::after may behave differently to other content in your site. For example, you won't be able to access the pseudo-element via Javascript, and your user may not be able to select the text.

The more typical way of achieving what you're trying to do is to have two (or more) elements on the page which contain the various different content strings, and to have your responsive CSS code trigger one of them to be visible and the others hidden according to the page size.