Styling underlines using floats in CSS pseudo-after.How to

Question

Styling underlines using floats in CSS pseudo-after.How to

My headings have underlines created using pseudo :after elements. However, when these headings are displayed next to a floated image/div, the underline shifts over the image/div.

h2:after {
   content: '';
  position: relative;
  max-width: 100px;
  display: block;
  height: 4px;
  background: #0073ae;
}

You can view a brief demonstration of this issue on Codepen: http://codepen.io/costelc/pen/GqgdvB

If you have any insights or solutions, please share. Thank you!

css

Answer 1

Answer №1

Floats push elements out of the flow, which is why the header overlaps with them. To prevent this, creating a block formatting context is necessary.

An effective method is to set overflow to anything other than visible, for example:

h2 {
  overflow: hidden;
}

As stated in CSS 2.1 Floats,

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (like an element with overflow other than visible) should not overlap the margin box of any floats within the same block formatting context

body {
  max-width: 300px;
}
.right {
  width: 100px;
  height: 100px;
  background: #eee;
  float: right;
  margin: 0 0 0 20px;
}
.clear {
  clear: both;
}
.left {
  width: 100px;
  height: 100px;
  background: #eee;
  float: left;
  margin: 0 20px 0 0;
}
h2 {
  overflow: hidden;
}
h2:after {
  content: '';
  position: relative;
  max-width: 100px;
  display: block;
  height: 4px;
  background: #0073ae;
}

<h2>Good heading here</h2>
<div class="right"></div>
<h2>Another good heading here</h2>
<p>anything here</p>
<br class="clear">
<div class="left"></div>
<h2>Bad heading here</h2>
<p>anything here</p>

Answer 2

Floats push elements out of the flow, which is why the header overlaps with them. To prevent this, creating a block formatting context is necessary.

An effective method is to set overflow to anything other than visible, for example:

h2 {
  overflow: hidden;
}

As stated in CSS 2.1 Floats,

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (like an element with overflow other than visible) should not overlap the margin box of any floats within the same block formatting context

body {
  max-width: 300px;
}
.right {
  width: 100px;
  height: 100px;
  background: #eee;
  float: right;
  margin: 0 0 0 20px;
}
.clear {
  clear: both;
}
.left {
  width: 100px;
  height: 100px;
  background: #eee;
  float: left;
  margin: 0 20px 0 0;
}
h2 {
  overflow: hidden;
}
h2:after {
  content: '';
  position: relative;
  max-width: 100px;
  display: block;
  height: 4px;
  background: #0073ae;
}

<h2>Good heading here</h2>
<div class="right"></div>
<h2>Another good heading here</h2>
<p>anything here</p>
<br class="clear">
<div class="left"></div>
<h2>Bad heading here</h2>
<p>anything here</p>

Styling underlines using floats in CSS pseudo-after.How to

Answer №1

Similar questions

I created some jQuery code that modifies a button when it is hovered over, however, I ended up writing the code individually for each button. What steps can I take to turn it

HTML5's video tags are capable of displaying video content without audio playback functionality

Rotating an HTML caret using CSS does not pivot from the center point

Struggling to achieve the desired layout in the navigation code using CSS Grid. I am aiming for it to occupy the entire width of the screen

Guide on integrating animate.css animations with Vue's Transition and TransitionGroup components

Troubleshooting Alignment Problems in Bootstrap 4 Tables

Revamping Sign-out Design in AdminLTE with ASP.NET

Tips on utilizing multiple dynamically generated toggle switches efficiently

Creating HTML that adjusts to the size of the viewport

Changed static divs into flexible divs

Inconsistent expansion panel widths observed in Chrome when using React material-ui

Adding color to the header's top section and leaving the navigation bar untouched

The anchor tag dwarfs the element it contains

Having trouble with images not showing up properly when applying rounded CSS borders and opacity effects

"Using enchant.js to create a game that utilizes an if statement to show a specific

What is the best way to target elements that have the contentEditable attribute set to true using CSS?

Images failing to load properly

Looking for a way to customize the background-color and border of the <tr> element in DataTables 1.9.4? Learn how to enhance the styling of your tables with these

Tips for altering the color of an image using CSS attributes

Issue with z-index not applying to a fixed header