CSS properties - content

revision: February 2, 2024

content property

- is used with the ::before and ::after pseudo-elements, to insert generated content.

Syntax: content: normal | none | counter | attr | string | open-quote | close-quote |no-open-quote |no-close-quote |url | initial | inherit;

Property values:

normal : default value. Sets the content, if specified, to normal, which default is "none" (which is nothing)

none : sets the content, if specified, to nothing

counter : sets the content as a counter

attr (attribute) : sets the content as one of the selector's attribute

string : sets the content to the text you specify

open-quote : sets the content to be an opening quote

close-quote : sets the content to be a closing quote

no-open-quote : removes the opening quote from the content, if specified

no-close-quote : removes the closing quote from the content, if specified

url (url) : sets the content to be some kind of media (an image, a sound, a video, etc.)

initial : sets this property to its default value.

inherits : inherits this property from its parent element.

JavaScript syntax: you can't give an element a pseudo-class by using JavaScript,but there are other ways to get the same result.

example: content property

"value: normal"

My name is Jacky

I live in London

code:

                    <p id="id">My name is Jacky</p>
                    <p id="hometown">I live in London</p>     
                    <style>
                        p#id::before {content: "Read this -";}
                        p#hometown::before {content: none;}     
                    </style>

example: content property

"value: none"

My name is Jacky

I live in London

code:

                    <p id="id1">My name is Jacky</p>
                    <p id="hometown1">I live in London</p>
                    <style>
                        p#id1::before {content: "Read this -";}
                        p#hometown1::before {content: none;}
                    </style>

example: content property

"value: counter"

First make a variable (myIndex) and make it increase every time a p element occurs.

Then insert the counter in front of all p elements

another p element

code:

                    <p id="id3">First make a variable (myIndex) and make it increase every time a 
                    p element occurs.</p>
                    <p id="id3">Then insert the counter in front of all p elements</p>
                    <p id="id3"> another p element</p>
                    <style>
                        p#id3 {counter-increment: myIndex;}
                        p#id3::before {content:counter(myIndex);}
                        p#id3::before {content:counter(myIndex);}
                    </style>

example: content property

"attr (attribute)"

(My website)

The attr() property inserts a specified attribute's value before or after the selected element(s).

code:

                    <a target="_blank" href="https://lwitters.com">(My website)</a>
                    <p>The attr() property inserts a specified attribute's value before or 
                    after the selected element(s).</p>
                    <style>
                        a{padding-left: 5vw;}
                        a::before {content: attr(href);}
                    </style>

example: content property

"value: string"

My name is Jacky

I live in London

code:

                    <p id="d4">My name is Jacky</p>
                    <p id="id5">I live in London</p>
                    <style>
                        p#id4::before, p#id5::before {content: "Read this -";}
                    </style>

example: content property

"value: open-quote" , "value: close-quote"

My name is Jacky

I live in London

Note: You cannot have "close-quote" without "open-quote".

code:

                    <p id="id6">My name is Jacky</p>
                    <p id="id6">I live in London</p>
                    <style>
                        p#id6::before {content: open-quote;}
                        p#id6::after {content: close-quote;}
                    </style>

example: content property

"value: no-open-quote" , "value: no-close-quote"

My name is Jacky

I live in London

Note:In this section, p elements should have quotes, but p elements with class="hometown" should not.

Note: You cannot have "close-quote" without "open-quote".

code:

                    <p class="me">My name is Jacky</p>
                    <p class="hometown">I live in London</p>
                    <style>
                        p.me::before {content: open-quote;}
                        p.me::after {content: close-quote;}
                        p.hometown::before {content: no-open-quote;}
                        p.hometown::after {content: no-close-quote;}
                    </style>

example: content property

"value: url"

My name is Jacky

I live in London

code:

                    <p id="id7">My name is Jacky</p>
                    <p id="id7">I live in London</p>
                    <style>
                        p#id7::before {content: url(icon6.png);}
                    </style>

example: content property

My website

A bird in hand is worth two in the bush.

code:

                    <a target="_blank" href="https://lwitters.com">My website</a>
                    <br>
                    <p>A bird in hand is worth two in the bush.</p>
                    <style>
                        .one a { color: #ff652f; font-size: 1vw; padding: 2vw;}
                        .one a::before {content: "\1F517 ";}
                        .one a::after {content: ' (" attr(href) ")'; font-size: 1vw; color: #272727;}
                        .one p{position: relative; padding: 2vw; font-size: 1.15vw;}
                        .one p::before {content: open-quote; position: relative; top: -1vw;font-size: 2vw; color: red;}
                        .one p::after {content: close-quote; position: relative; top: - 1vw; font-size: 2vw; color: red;} 
                    </style>

example: content property

Content property with no-open-quote/no-close-quote

A wise man once said: Be true to yourself, but don't listen to those who sayDon't be true to yourself. That is good advice.

code:

                    <div class="container">
                        <h5>Content property with no-open-quote/no-close-quote</h5>
                        <p><q>A wise man once said: <q class="noquotes">Be true to yourself,
                        but don't listen to those who say <q>Don't be true to yourself.</q></q>
                        That is good advice.</q></p>
                    </div>
                    <style>
                    .two.container {width: 40vw;margin: 0 auto;}
                    .two q {quotes: "“" "”" "'" "'" "“" "”";}
                    .two q::before {content: open-quote;}
                    .two q::after {content: close-quote;}
                    .two .noquotes::before {content: no-open-quote;}
                    .two .noquotes::after {content: no-close-quote;}
                    </style>

example: content property

code:

                    <ol>
                        <li>a </li>
                        <li>b </li>
                        <li>c </li>
                    </ol>
                    <style>
                        .three ol {counter-reset: exampleCounter;}
                        .three li {counter-increment: exampleCounter;}
                        .three li::after {content: "[" counter(exampleCounter) "] == 
                        [" counter(exampleCounter, upper-roman) "]";}
                    </style>

example: content property

Image Article

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis cupiditate quam excepturi, quod tenetur impedit possimus dignissimos sed! Cum corporis alias sapiente dolorem, iure voluptatum laborum sunt maxime quidem delectus!

Gradient Article

code:

                    <div>
                        <article class="image four">
                            <h4>Image Article</h4>
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis 
                            cupiditate quam excepturi, quod tenetur impedit possimus dignissimos sed! 
                            Cum corporis alias sapiente dolorem, iure voluptatum laborum sunt maxime 
                            quidem delectus!</p>
                        </article>
                        <article class="gradient four">
                            <h4>Gradient Article</h4>
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis 
                            cupiditate quam excepturi, quod tenetur impedit possimus dignissimos sed! 
                            Cum corporis alias sapiente dolorem, iure voluptatum laborum sunt maxime 
                            quidem delectus!</p>
                        </article>
                    </div>
                    <style>
                        .four article {margin: 4vw; padding: 2vw;background: white;}
                        h3{margin-left: 4vw;}
                        .four .image::before {content: url(1.jpg);display: block;width: 100%;height: 20vw; overflow: hidden; }
                        .four .gradient::before {content: linear-gradient(#e66465, #9198e5); display: block;  width: 100%; height: 20vw;overflow: hidden;}
            
                    </style>

example: content property

content property: cover page example

A nice and relaxing holiday!

code:

                <div class="welkom">
                    <h1>A nice and relaxing holiday!</h1>
                </div>
                <style>
                    .welkom {position: relative; height: 100vh; width: 100%; display: flex;    align-items: center; justify-content: center;}
                    .welkom::before {content: ""; background-image: url('../pics/1.jpg'); background-size: cover; position: absolute; width: 100%; top: 0px; right: 0px; bottom: 0px;left: 0px; opacity: 0.75;}
                    .welkom h1 {position: relative; color: #ffffff; font-size: 14vw; line-height: 0.9; text-align: center;}
                </style>