Page Widget How to - Use before to add border with straight join

Question

We would like to know how to use before to add border with straight join.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.test {<!--from www.j a va2 s .  com-->
  border: 1px solid #E5E5E5;
  border-left: 0;
  padding: .1em .3em;
  position: relative;
}

.test:before {
  display: block;
  content: ".";
  color: transparent;
  font-size: 0;
  border-left: 5px solid #f24495;
  height: 100%;
  position: absolute;
  left: 0;
  padding: 1px 0;
  top: -1px;
  bottom: -1px;
}
</style>
</head>
<body>
  <h1 class="test">Test</h1>
</body>
</html>

The code above is rendered as follows: