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

user_11341498 0
Viewed 138

We are using Markdown (Kramdown) to generate a static website. For infoboxes, we can annotade paragraphs and get the following results:

{:.note .icon-check title="This is a title"}
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

And this is the converted HTML:

<p class="note icon-check" title="This is a title">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>

The style is (SCSS):

p.note {
  &::before {
    float: right;
  }

  position: relative;

  &[title]::after {
    content: attr(title);
    position: relative;
    top: 0;
    left: 0;
  }
}

.icon::before {
  content: "@";
}

As we are using Icomoon icon fonts, where the content is set in :before, the title must be in :after.

  • we won't change the Iconfont, so the icon must stay in :before
  • no additional distracting markup in the markdown, so no HTML wrapper
  • no Javascript

It is possible to set an absolute positioning to the title, but this would be too narrow to the paragraph-text itself, as no margin can be set.

Here is a JSFiddle

Now, how does one style a box with :after as a title on top, that also looks good when no title is set?

main {
  width: 50%;
  display: block;
  place-items: center;
  margin: auto;
}

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

p.note::before {
  margin: auto 0 0.5em 0.5em;
  float: right;
}

p.note[title]::after {
  content: attr(title);
  position: relative;
  font-weight: bold;
  top: 0;
  left: 1em;
}

.icon::before {
  font-size: 2em;
  content: "@";
}
<html>

<body>
  <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>
</body>

</html>

What it looks like: enter image description here How it should look like: enter image description here

css-position pseudo-element css html
2 Answers

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>

Or a basic idea like below:

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::before {
  margin: auto 0 0.5em 0.5em;
  float: right;
}

p.note[title]::after {
  content: attr(title);
  position: absolute;
  font-weight: bold;
  top: 0.5em;
  left: 0;
  right:2em;
  text-align:center;
}
p.note[title] {
  padding-top:2em;
}

.icon::before {
  font-size: 2em;
  content: "@";
}
<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>

user_86203330

since grid doesn't help enough, let's go back in time with display :table and display:table-caption to add another answer and see if that could work too for you ;)

* {
  box-sizing: border-box;
}

main {
  width: 50%;
  min-width:450px;
  display: block;
  place-items: center;
  margin: auto;
}

p.note {
  font-size:clamp(12px, 4vw, 30px);
  border: 3px solid red;
  border-radius: 3px;
  padding: 1em;
  display: table;
  padding-top: 1.5em;
}
p.note::before {
  margin: auto 0 0.5em 0.5em;
  float: right;
  font-weight:bold;
  color:tomato;
}
p.note[title]::after {
  content: attr(title);
  font-weight: bold;
  display: table-caption;
  margin-bottom: -1.6em;
  text-align: center;
  padding-right: 3em;
}

.icon::before {
  font-size: 2em;
  content: "@";
  line-height: 0.25;
}
<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>

user_24420990
Related