css下划线长短太短

CSS下划线是网页设计中常用的一种样式，它可以给文本添加一个下划线，突出文本的重要性。然而，在制作过程中，我们也会遇到下划线可能会太短的情况。

p {
    text-decoration: underline;
    text-underline-position: under;
    /*下划线位置*/
    text-underline-offset: 4px;
    /*下划线偏移量*/
} 

上面的样式是给所有p标签添加下划线，并通过text-underline-offset属性设置下划线的偏移量，避免下划线太短的问题发生。

但是，如果我们只是针对某个字体大小进行处理，可以使用em或者rem单位进行计算。

p.em-underline {
    font-size: 2em;
    text-decoration: underline;
    text-underline-position: under;
    /*下划线位置*/
    text-underline-offset: 0.5em;
    /*下划线偏移量*/
} 

如上面的例子，我们给em-underline类添加下划线，并且通过text-underline-offset属性设置下划线的偏移量为0.5em。由于该类的字体大小为2em，所以计算后下划线的长度为1em，与字体大小相等，不会出现太短的问题。

因此，在设计和开发过程中，我们需要考虑下划线的长度和位置等因素，避免出现不必要的问题。