Daniel Daniel - 3 months ago 19
CSS Question

Diagonal dashed pattern on each the side of paragraph



<div class="search">
<p>SEARCH</p>
</div>





dashed pattern on each side of a word

I am trying to add a dashed lateral padding like in the image. Only in the sides of the text. Is there any way I can do that ?

Answer

You can use linear gradient for the pattern and the technique described in Line before and after title over image to position it on each side of the title.
It would be something like this:

.search {
  margin: .7em auto;
  overflow: hidden;
  padding-left:100px;
}
.search:before, .search:after {
  content: "";
  display: inline-block;
  width: 100%; height:0.8em;
  margin: 0 .5em 0 -105%;
  vertical-align: middle;
  background-image: linear-gradient(-45deg, #E0E0E0 25%, transparent 25%, transparent 50%, #E0E0E0 50%, #E0E0E0 75%, transparent 75%, transparent);
  background-size: 0.5em 0.5em;
}
.search:after {
  margin: 0 -105% 0 .5em;
}
.search p {
  display: inline-block;
  vertical-align: middle;
}
<div class="search">
  <p>SEARCH</p>
</div>
<div class="search">
  <p>MOST POPULAR</p>
</div>