[SOLUCIONADO] Línea con el mismo ancho que el texto

[NueveReinas]

Hola gente

Ando buscando ayuda para simular este efecto, donde hay una línea gris debajo del texto que tiene otra línea verde del mismo ancho que el texto.



¿Alguna idea de cómo está hecho?

jrasias d ante braso

[AngelKrak]

solamente se me ocurrio con Display Inline & Inline-block ;) ahi te dejo el codigo y una demo ;)

Código HTML:

<div>
  <p>El Texto xD</p>
</div>
 

Código CSS:

p {
  font-size: 24pt;
  border-bottom: 1px solid #14B816;
  display: inline;
  top: 1px;
  position: relative;
}
div {
  border-bottom: 1px solid #ddd;
  display: inline-block;
  width: 98vw;
}
 

Demo:
http://codepen.io/AngelKrak/pen/yYNgxE

[NueveReinas]

Iniciado por AngelKrak

solamente se me ocurrio con Display Inline & Inline-block ;) ahi te dejo el codigo y una demo ;)

Código HTML:

<div>
  <p>El Texto xD</p>
</div>
 

Código CSS:

p {
  font-size: 24pt;
  border-bottom: 1px solid #14B816;
  display: inline;
  top: 1px;
  position: relative;
}
div {
  border-bottom: 1px solid #ddd;
  display: inline-block;
  width: 98vw;
}
 

Demo:
http://codepen.io/AngelKrak/pen/yYNgxE

Perfectísimo, justo lo que necesitaba.

Muchas gracias, AngelKrak