We are utilizing Markdown (Kramdown) for generating a static website. When incorporating infoboxes, we can enhance paragraphs and achieve the following outcomes:
{:.note .icon-check title="This is a title"}
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Here 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 being used (SCSS) is as follows:
p.note {
&::before {
float: right;
}
position: relative;
&[title]::after {
content: attr(title);
position: relative;
top: 0;
left: 0;
}
}
.icon::before {
content: "@";
}
Since we are relying on Icomoon icon fonts, where the content is defined in :before, the title has to be in :after.
- We will not alter the Iconfont, so the icon must remain in
:before - No extra distracting markup in the markdown, hence no HTML wrapper
- No need for Javascript
An absolute positioning can be applied to the title, but it might be too limited to the paragraph-text itself as no margin can be established.
A demonstration using JSFiddle
Now, the question arises - how does one design a box with :after serving as a title on top, which also appears appealing when no title is specified?
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>Preview of the design: https://i.sstatic.net/DKt6U.png Expected appearance: https://i.sstatic.net/8rPmh.png