How to do an underline effect by controlling the size of the underline

Question

How to do an underline effect by controlling the size of the underline

Navigation

#1 by (6 votes)

3

How to make a title have an underscore, but can control the size of that underscore.

Here is an example of what you want:

css css3

asked by anonymous 14.12.2018 / 15:05

1 answer

Replace a specific character in an input type="text" Section with two colors

score 6 · Accepted Answer

Option 1

Here is an example of using a pseudo-elemento it is based on measures in EM and % , so when you change font size REM the element changes proportionally.

You can change this value manually if you want. I've commented on the code

h1, h2, h3, h4, h5, h6 {
  position: relative;
  display: inline-block;
  font-family: sans-serif;
}
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
  content: "";
  position: absolute;
  top: 110%; /* posição da linha abaixo do texto relativa a altura do pai */
  left: 0;
  width: 40%; /* comprimento da linha relativa ao tamanho do texto */
  height: 0.2em; /* altura da linha relativa ao valor da font do pai */
  background-color: black;
}
h2::after {
    height: 1px; /* altura fixa customizado */
}
h4::after {
    width: 100px; /* comprimento fixo customizado */
}
h6::after {
    background-color: red; /* cor customizada */
}

<h1>Meu H1</h1><br>
<h2>Meu H2</h2><br> <!-- exemplo com largura da linha fixa -->
<h3>Meu H3</h3><br>
<h4>Meu H4</h4><br> <!-- exemplo comprimento da linha fixo -->
<h5>Meu H5</h5><br>
<h6>Meu H6</h6><br> <!-- exemplo com cor diferente -->

Option 2

As a pseudo-elemento and it accepts the property content:"" , you can even put an image there, or a Unicode character as in this example

h1, h2, h3, h4, h5, h6 {
  position: relative;
  display: inline-block;
  font-family: sans-serif;
}
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
  content: "9E"; /* caractere unicode */
  position: absolute;
  top: 110%; 
  left: 0;
  margin: 0;
  line-height: 0; /* valores de font */
  font-size: 1.25em; /* valores de font */
  color: green; /* valores de font */
}

h2::after{
  content: url(http://www.placecage.com/16/16); /* img no content com url() */
  position: absolute;
  top: 110%; 
  left: 0;
  margin: 0;
  height: 16px; /* altura da imagem */
  width: 16px; /* largura da imagem */
}
h6::after{
  color: red; /* cor da fonte "seta", essa valor normalmente é herdado do pai, mas vc pode sobrescreve-lo aqui */
}

<h1>Meu H1</h1><br>
<h2>Meu H2</h2><br> <!-- exemplo com imagem -->
<h3>Meu H3</h3><br>
<h4>Meu H4</h4><br>
<h5>Meu H5</h5><br>
<h6>Meu H6</h6><br> <!-- exemplo com color diferente -->