html - 在文本“下方”创建下划线

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        2年前关闭。
                                                                                            
                
        
我正在尝试创建一个标题，其中一行在文本“下方”，如下所示


我看起来像是底部边框，但是我无法确定如何通过文字来移动边框。

谢谢。

最佳答案

您可以使用伪类生成“边界”并将其放置在所需的位置。

span {
  font-size: 3rem;
  position: relative;
}

span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  background-color: purple;
  bottom: 8px;
  left: 0;
  z-index: -1;
}

<span>Our Mission</span>

关于html - 在文本“下方”创建下划线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53172189/