Как сделать такой title?

Question

[Zhenya Tureysky]

Как сделать такой title?


Знаю, что нужно делать через псевдоэлементы, но ничего не получается.

Answer 1

[Антон]

h1 {
  font-size: 30px;
  position: relative;
  display: table;
}
h1:before, h1:after {
  content:'';
  display: block;
  width: 30px;
  height: 5px;
  position: absolute;
  transform: rotate(-45deg);
}
h1:before {
  top:0;
  left:-20px;
  background:#f00; 
}
h1:after {
  bottom:0;
  right:-20px;
  background:#0f0;
}

Comments

[Сергей delphinpro]

Абсолютом наверное не стоит делать. Просто inline-block + смещение по вертикали.

[Сергей delphinpro]

h1 {
  font-size: 30px;
}
h1:before, h1:after {
  content:'';
  display: inline-block;
  width: 30px;
  height: 5px;
}
h1:before {
  transform: rotate(-45deg) translateY(-1em);
  background:#f00; 
}
h1:after {
  transform: rotate(-45deg) translateY(1em);
  background:#0f0;
}