请问如何给文字加带有颜色的下划线，并且下滑线长度和文字长度一样长

.yourclassname {
display: block;
border-bottom:1px solid red;
padding-bottom: 2px
}

有用请采纳下！多谢