Pseudo class before

HTML & CSS
1

I have a simple h1 tag. What I would like is to have a border on the left side and a different color on the other side of the line, like in this example

I have tried it with pseudo before but I can’t get it to work: This is what I have sofar:

h1 {
  font-size: 200%;    
  margin-bottom: 1em;
  text-transform:uppercase;
}

h1:before {
  content: ".";
  width: 5em;
  margin-right: .5em;
  display: inline-block;
  background: #CCC; 
  color: #CCC;
  border-right: 3px solid #059df0    
}

But that isn’t working. How can accomplish this effect?

2

That looks pretty close except I assume you want a gap between the gray background and the blue border?

If so then use:after for the border.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1 {
  font-size: 200%;    
  margin-bottom: 1em;
  text-transform:uppercase;
	position:relative;
}
h1:before {
  content: ".";
  width: 5em;
  margin-right: .5em;
  display: inline-block;
  background: #CCC; 
  color: #CCC;
}
h1:after{
	content:"";
	position:absolute;
	left:5.2em;
	top:0;
	bottom:0;
	width:3px;
	background:#059df0;	
}

</style>
</head>

<body>
<h1>What we do</h1>
</body>
</html>

Or did you mean something else?

1 Like
3

try

h1 {
  font-size: 200%;    
  margin-bottom: 1em;
  text-transform:uppercase;
  border-left: 5em #CCC solid; 
  padding-left:1em;
  position: relative;
}
h1:before {
  content:'';
  top:0;
  bottom:0;
  position: absolute;
  left: 6px;
  display: inline-block;
  border-right: 3px solid #059df0;
}

hope that helps

(ninjaed by Paul…:wink: )

4

another alternate way of accomplishing this, W/O position absolute…:slight_smile:

h1 {
  font-size: 200%;    
  margin-bottom: 1em;
  text-transform:uppercase;
  border-left: 5em #CCC solid; 
}
h1:before {
  content:'';
  width:6px;
  margin-right:.5em;
  height: 2.8ex; 
  line-height: 1;
  vertical-align:  middle;
  display: inline-block;
  border-right: 3px solid #059df0;
}
5

::before and ::after are pseudo elements, not classes. Just FYI.

CSS3 now begins to denote them with the double colon (::slight_smile: to actually help us denote which are elements and which are classes.

6

@ Paul and Dresden. All three methods are working great. thanks a lot

I have adjusted the css a bit because with the above methods the h1 tag was actually indenting within the parent, where I actually wanted the grey bean to start at the edge of the viewport So I adjusted like this:

h1 {
  font-size: 200%;    
  margin: 0 0 1em -999.2em;
  text-transform:uppercase;
  position:relative;
}

h1:before {
  content: ".";
  width: 999em;
  margin-right: .5em;
  display: inline-block;
  background: #CCC; 
  color: #CCC;
}

h1:after{
  content:"";
  position:absolute;
  left: 999.2em;
  top: 0;
  bottom: 0;
  width:3px;
  background:#059df0;    
}

So my question is now, is this a proper way of doing this or would you guys use a different method?

@ Ryan. Thank you for pointing that out to us

7

Our examples above would be at the edge of the viewport if you reduced margins on the body,

It’s hard to see what effect you want as the last example doesn’t relate to your original drawing any more. You just seem to have 2 x 1px borders now at the left?

In your example should text wrap it will disappear.

We would need to know the dynamics a little more. If you want never ending lines then the techniques in this example would suffice.

It’s all about what comes next :smile:

8

Hi Paul. Thank you for the reply. I made a screenshot of what I want. I accomplished that using the last mentioned CSS

1000×472 697 KB

My question is just if this could break the layout.

Thank you ina advance

9

If the text “Over Ons” gets changed to something with more words then there would be an issue if the words wrap to the next line as they will disappear. Or if the site is responsive then they probably will wrap at some stage if there are more than 2 words.

I’d probably do it like this so that text can wrap:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	max-width:980px;
	margin:auto;
	background:#f9f9f9;
}
h1 {
	font-size: 200%;
	margin: 0 0 1em;
	text-transform:uppercase;
	position:relative;
}
h1:before, h1:after {
	content: "";
	position:absolute;
	width: 998.6em;
	background: #CCC;
	left:-999em;
	top:0;
	bottom:0;
}
h1:after {
	position:absolute;
	left:-.3em;
	width:3px;
	background:#059df0;
}
</style>
</head>

<body>
<div class="wrap">
		<h1>Testing </h1>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
</div>
</body>
</html>
10

Hi Paul. Thank you for the reply. That works indeed great. Thanks a lot

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.