CODEWITHSUNDEEP
css
Tuan Anh Tran
Tuan Anh Tran

Reputation: 139

::after, ::before selector in element style

I'm doing something like this however, the word world won't appear. having that rule declare in the head css, it works fine.

can anyone explain this to me?

<span id="aa" style="#aa::after{content=" world";}">hello</span>

Upvotes: 0

Views: 1334

Answers (4)

IMSoP
IMSoP

Reputation: 97688

The style attribute applies styles to the current element; it cannot contain complete style sheet rules with selectors.

Although the selector in this case happens to match the same element, if it were possible, you would also be able to do this, which would make very little sense:

<div id="one" style="#two { display: none; }"></div>
... much content ...
<div id="two">Huh?</div>

Upvotes: 0

Airen
Airen

Reputation: 2169

No. The style attribute only defines style properties for a given HTML element. Pseudo-classes are a member of the family of selectors, which don't occur in the attribute.

Upvotes: 3

user1823761
user1823761

Reputation:

Working jsFiddle Demo

You must separate your CSS from your HTML:

<!doctype html>
<html>
<head>
    <title>My Web Page</title>
    <style>
        #aa:after {
            content: 'world';
        }
    </style>
</head>
<body>
    <span id="aa">hello</span>
</body>
</html>

It's also better to create a file with .css extension, for example styles.css, and put the style in it:

#aa:after {
    content: 'world';
}

And in your HTML, link to this file:

<!doctype html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <span id="aa">hello</span>
</body>
</html>
  • Be sure that your html and css file are in the same folder.

Upvotes: 0

Blender
Blender

Reputation: 298106

The style attribute doesn't accept selectors. It only accepts the rules to apply to the current element. You can't do this with a style attribute.

Upvotes: 2

Related Questions