Heading with line css

VCLEVER BLOG

How to style a heading with horizontal lines either side using CSS

You’d think it’d be the simplest of things to create a centred heading with horizontal lines either side of it, but as is so often the case in web design, when you throw in lots of different browsers and devices, things aren’t so simple after all.

The problem

As with anything in HTML and CSS, there are a number of different ways you can achieve this effect. Most involve adding a which I’m not too keen on – it’s much cleaner to just have header tags (e.g. or ) and not be worrying about adding a as well, especially if a client has to input these themselves. The span solutions also have the drawback of needing a background to cover the horizontal line; this means they can’t be used on an image or gradient background. I also wanted to avoid using JavaScript or images. Cross-browser compatibility was a must too – unless a project has any more specific requirements, we usually look to make it compatible back to Internet Explorer 8.

When researching the best solution, I found this excellent post which covers a number of methods, but my favourite solution was actually posted in the comments in response to the article.

The ‘best’ solution

This method, taken from this post here, is a very neat way of creating the appearance I was looking for. It doesn’t require any elements and is beautiful in its simplicity. It’s compatible with major browsers all the way back to IE8. IE7 and IE6 don’t support pseudo elements like :before so it won’t work with them, but it does degrade nicely (it just doesn’t show the lines).

Here’s the CSS

h1 < overflow: hidden; text-align: center; >h1:before, h1:after < background-color: #333; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; >h1:before < right: 0.5em; margin-left: -50%; >h1:after

To change the colour and thickness of the line, change the background-color (#333) and height (1px) respectively.

The horizontal line will stretch across the entire width of the containing element, so if you want it to cover a smaller width, simply use an appropriately-sized containing element.

Here’s how it looks:

Horizontal Line Heading

A very tidy end-product made with neat CSS which renders perfectly in all major browsers right back to IE8 (and still looks fine in IE7/6 but without the lines). A big thanks to Pablo Villoslada Puigcerber for his solution.

Источник

Line-On-Sides Headers

Forums user McAsh wondered how they might code up a design in which there was a large header and a smaller subheader beneath it which featured double horizontal lines jutting out after the text to both the left and right of the centered text. An easy thing to mock up as image, but a much more difficult thing to pull off in CSS because of the variable nature of text (length, size, etc). The post mockup was this: I coded up one way to do it which works, but isn’t quite perfect. I figured I’d post it here and you all could chime in with better ways if you can think of them. If the background was a solid color, this would be fairly easy. Apply the lined background to the subhead and center a span in the middle with a bit of padding and a background color to match the solid background. We don’t have a solid background color here. Perhaps some trickery using the same background image but fixing the background position would work, but I didn’t go there. Instead, I used the ::before and ::after pseudo elements to create the left and right set of lines. The text is still in a span, which is relatively positioned. The right set is a pseudo element on that span which starts 100% from the left with a bit of margin to push it away, and vice versa for the left set. Both are of a fixed height and use border-top and border-bottom to create the lines. Thus no backgrounds are used and the insides of everything is transparent. The length of the lines is long enough to always break out of the parent container, and they are cut off by hidden overflow on that parent.

.fancy < line-height: 0.5; text-align: center; >.fancy span < display: inline-block; position: relative; >.fancy span:before, .fancy span:after < content: ""; position: absolute; height: 5px; border-bottom: 1px solid white; border-top: 1px solid white; top: 0; width: 600px; >.fancy span:before < right: 100%; margin-right: 15px; >.fancy span:after

1. The line-height: 0.5 thing in there to center the lines around the text feels like a “magic number” to me which might not be right depending on the font.
2. The width of the pseudo elements lines isn’t exactly what they need to be, but way longer than they need to be and cut off.

Neither are that huge of a big deal but little things that probably could be cleverly fixed.

Источник

Line on side headings in CSS

A discussion started in our Slack channel on how to best accomplish a design like this:

This legend-style line-on-side heading is a popular trend right now, and there doesn’t appear to be a definitive approach.

Creating some lines atop a solid background isn’t too challenging, the difficulty comes when you overlay it on a gradient or photograph. Neat, but it would be nicer if the extra markup wasn’t there.

A CSS Tricks article outlines an approach using spans around a paragraph.

In this JSFiddle, a clever use of overflow: hidden means no additional spannage. But it falls apart when the text wraps onto multiple lines.

It was time to boot up CodePen and get experimenting:

Flexbox solution

h2  display: flex; width: 100%; justify-content: center; align-items: center; text-align: center; > h2:before, h2:after  content: ''; border-top: 2px solid; margin: 0 20px 0 0; flex: 1 0 20px; > h2:after  margin: 0 0 0 20px; > 

Flexbox and pseudo elements was the first solution I found. Generally, pseudo elements and flexbox are a pain, namely when resetting a clearfix, but in this instance, they work together brilliantly.

CSS Grid solution

h2  display: grid; grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr); align-items: center; text-align: center; grid-gap: 20px; width: 100%; > h2:before, h2:after  content: ''; border-top: 2px solid; > 

CSS Grid seemed like the natural next step for enhancement.

grid-gap has to be one of the best properties ever added to the spec. Margin resets can be removed, min-widths are handled by minmax and the pseudo elements only need to worry about being presentational. CSS Grid is brilliant.

Источник

How to style a heading with horizontal lines either side using CSS

How to style a heading with horizontal lines either side using CSS

You’d think it’d be the simplest of things to create a centred heading with horizontal lines either side of it, but as is so often the case in web design, when you throw in lots of different browsers and devices, things aren’t so simple after all.

The problem

As with anything in HTML and CSS, there are a number of different ways you can achieve this effect. Most involve adding a which I’m not too keen on – it’s much cleaner to just have header tags (e.g.

) and not be worrying about adding a as well, especially if a client has to input these themselves. The span solutions also have the drawback of needing a background to cover the horizontal line; this means they can’t be used on an image or gradient background. I also wanted to avoid using JavaScript or images. Cross-browser compatibility was a must too – unless a project has any more specific requirements, we usually look to make it compatible back to Internet Explorer 8.

When researching the best solution, I found this excellent post which covers a number of methods, but my favourite solution was actually posted in the comments in response to the article.

The ‘best’ solution

This method, taken from this post here, is a very neat way of creating the appearance I was looking for. It doesn’t require any elements and is beautiful in its simplicity. It’s compatible with major browsers all the way back to IE8. IE7 and IE6 don’t support pseudo elements like :before so it won’t work with them, but it does degrade nicely (it just doesn’t show the lines).

Here’s the CSS

h1 < overflow: hidden; text-align: center; >h1:before, h1:after < background-color: #333; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; >h1:before < right: 0.5em; margin-left: -50%; >h1:after

To change the colour and thickness of the line, change the background-color (#333) and height (1px) respectively.

The horizontal line will stretch across the entire width of the containing element, so if you want it to cover a smaller width, simply use an appropriately-sized containing element.

Here’s how it looks:

HORIZONTAL LINE HEADING

A very tidy end-product made with neat CSS which renders perfectly in all major browsers right back to IE8 (and still looks fine in IE7/6 but without the lines). A big thanks to Pablo Villoslada Puigcerber for his solution.

Источник