Css: Before/After Content with Title

CSS: before / after content with title

You don't need a pseudo-element for that:

p {    background:lightblue;    padding:15px;    margin:15px;}

<p class="hover-me" title="I Show up on Hover">Some Text</p>

::before and ::after elements with title

Is this what you're looking for?

#s-text {  text-align: center;}
#s-text h2 {  font-size: 2.25em;  font-weight: 700;  color: black;  position: relative;  margin-bottom: 20px; padding: 0;  display: inline-block;}
#s-text h2:after {  right:-1em;}
#s-text h2:before {  left:-1em;}
#s-text h2:before,#s-text h2:after {  content: "";  position: absolute;  display: inline-block;  height: 10px; width: 30px;  background-color: red;  top: 50%;  transform: translateY(-50%);}

<div id="s-text">  <h2>what is it</h2></div>

How can I style a pseudo-element as the title of a paragraph?

A crazy idea using shape-outside. The trick is to use the before for the title where you apply float and after for the icon having position:absolute then the shape-outside will create a particular shape in order to simulate the float behaviour around the icon.

main {
  width: 50%;
  display: block;
  margin: auto;
  text-align:justify;
}

p.note {
  border: 3px solid red;
  border-radius: 3px;
  padding: 1em;
  position: relative;
}

p.note::after {
  margin: auto 0 0.5em 0.5em;
  position:absolute;
  top: 1em;
  right: 0.5em;
}

p.note[title]::before {
  content: attr(title);
  display:block;
  height:3.5em;
  float:right;
  width:100%;
  text-align:center;
  font-weight: bold;
  shape-outside:polygon(0 0,100% 0,100% 100%,calc(100% - 3em) 100%,calc(100% - 3em) calc(100% - 2em),0 calc(100% - 2em));
  /* To illustrate the shape */
  background:
    linear-gradient(rgba(255,255,0,0.3) 0 0) top/100% calc(100% - 2em) no-repeat,
    linear-gradient(rgba(255,255,0,0.3) 0 0) bottom right/3em 3em no-repeat;
  border:1px solid rgba(0,0,0,0.2);
   /**/
}

.icon::after {
  font-size: 2em;
  content: "@";
}

.icon:not([title])::after {
  display:none;
}

.icon:not([title])::before {
  font-size: 2em;
  content: "@";
  margin: auto 0 0.5em 0.5em;
  float:right;
}

<main>

  <p class="note icon" title="This is a title">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
  </p>

</main>

<main>

  <p class="note icon" >
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
  </p>

</main>

before pseudo-element covering inner content

display:block; position:relative; for <span> can help to you. DEMO

Use before & after Pseudo-element to make a line

You don't need both :before and :after, either of the 2 will be enough and as you've been told, you don't need an image. See the approach below.

#header {    width: 100%;    height: 50px;    margin: 50px 0;    text-align: center;    font-size: 28px;    position: relative;    background-color: #57585C;}
#header:after {    content: '';    width: 100%;    border-bottom: solid 1px #fff;    position: absolute;    left: 0;    top: 50%;    z-index: 1;}
h3 {    background-color: #57585C; /* Same as the parents Background */    width: auto;    display: inline-block;    z-index: 3;    padding: 0 20px 0 20px;    color: white;    position: relative;    font-family: calibri;    font-weight: lighter;    margin: 0;}

<div id="header">   <h3>Last Projects</h3></div>

css :before/:after pseudo-elements/content reference tag name

This isn't possible with css. To my knowledge, the only way to do this would be to write out the contents by hand.

how to get a slot content in the css content property of a pseudo ;:before element (or :;after) in a web component?

@lamplightdev

Thank you for your answer.

I was looking for something wich doesn't exist yet.
So I have chose a solution with css var and a setter to set it :

class extends HTMLElement {
  set content(val) {
    this.setAttribute('data-content',val);
  }
  constructor() {
...

and, of course :

:host::before {
  content: attr(data-content);
...

This seems to be the lighter solution I may imagine.

I'd like to suggest to web's standards developpers to create a new css function : slot(name) witch, with attr(...), var(...) and calc(...), could help the use of pseudo elements inside a web component.
Could someone show me the way to present this proposal ???

I do apologize for my poor english language (I'm french, nobdy's perfect).

Using :before and :after CSS selector to insert HTML

content doesn't support HTML, only text. You should probably use javascript, jQuery or something like that.

Another problem with your code is " inside a " block. You should mix ' and " (class='headingDetail').

If content did support HTML you could end up in an infinite loop where content is added inside content.

---

Related Topics