The HTML tag <aside>
The HTML tag <aside>
creates a sidebar with information related to the main content. It’s often used for call-out boxes, or additional information.
HTML
<aside><p>The Dunning-Kruger effect is named after David Dunning and Justin Kruger.</p></aside>
CSS
aside {
float: right;
width: 40%;
padding-left: 1rem;
margin-left: 1rem;
font-weight: 700;
font-style: italic;
color: rgba(84, 44, 0, 1.00);
border-left: 2px solid rgba(84, 44, 0, 1.00);
}
Arrow at the bottom
Arrow at the bottom with a utf-8 character
Arrow at the top of a container
Aside
Background color
Blackboard design
Breadcrumbs design
Calendar design
Checkboxes as circular buttons
Checkboxes as toggle switches
Cursor properties
Circular image with a shadow effect
Font Awesome pulled icons
Gallery picture frame with a price ribbon
Google pie chart
Google web fonts
Last child and not last child element
Letter spacing
List items with a Font Awesome icon
Neon text
Neon text with a flickering effect
Notebook paper background
Radio buttons as circular buttons
Radio buttons as rating stars
Remove the glow effect from an input field
Search bar with categories
Track (audio/video subtitles)
Web fonts
Whiteboard design