Inline Content CSS Property

Inline Content CSS Property

No. Inline styles via the 'style' attribute can only be applied to the context element, without any selectors of any sort.

can CSS 'content' property grab the value of inline style?

attr() is for HTML attributes only, not CSS properties. Even if you could obtain attr(style) (which you actually can), you'll only obtain the text value of that attribute, which is the following string:

"background-image: url(http://some_url.com);"

However, you won't be able to do anything meaningful with this text value (except printing it as content maybe).

If you want your pseudo-element to have the same background image as your element, use:

div:after {
    background-image: inherit;
}

Again, this by itself is not very meaningful; you have to specify other styles like the rest of the background property values, as well as giving it dimensions.

If you want to grab the URL of the background image and print it as content, that's not doable with CSS. You'll need to use JavaScript to look at the computed background-image value, parse that value, and insert it as content, instead of using an :after pseudo-element.

How do I display the :after content inline with the parent element?

1) The content and background of the same pseudo-element

1. Try to decrease the line-height of the content.
2. You can use any font properties to style your pseudo-elements.
3. You can simplify the margin property. 20px auto 20px auto is equivalent to 20px auto.

Please check the result. Is it what you want to achieve?

.expanded-info {  display: block;  margin: 8px auto;  text-align: center;}#expanded-phone:after {  width: 40%;  margin: 20px auto; /* 3. */  display: block;  content: 'or';  height: 3px;  background: #ccc;  line-height: 2px; /* 1. */}

<span class="expanded-info" id="expanded-phone">Give us a call</span>

how to create inline style with :before and :after

You can't. With inline styles you are targeting the element directly. You can't use other selectors there.

What you can do however is define different classes in your stylesheet that define different colours and then add the class to the element.

How do you make div elements display inline?

That's something else then:

div.inline { float:left; }.clearBoth { clear:both; }

<div class="inline">1<br />2<br />3</div><div class="inline">1<br />2<br />3</div><div class="inline">1<br />2<br />3</div><br class="clearBoth" /><!-- you may or may not need this -->

CSS pseudo-element in inline attribute style

It’s not possible. The working draft you are referring to is over 12 years old. Click on the link “Latest version” in it, and you’ll find the CSS Style Attributes, a W3C Recommendation (“W3C standard”). It was approved recently. It contains no changes to the style attribute as in HTML specs, and this is indeed the message: the attribute has not been enhanced, and there are no plans to do so.

The conclusions depend on why you would use the construct. Normally, just assign an id attribute to the element and use an id selector in CSS.

---

Related Topics