边框只占用元素而不是伪元素

Posted 2023-03-05

技术标签:

【中文标题】边框只占用元素而不是伪元素【英文标题】：Borders to take up just element not pseudo element 【发布时间】：2019-07-14 03:02:14 【问题描述】：

我正在制作一个网站，除了一些文字外，我还想在其中添加一些边框。在它上面，一些图标。我想要的是边框只占据LinkedIn文本的文本区域，而不是整个班级。我试过position: absolute，但一无所获。

.contactSocial 
  display: flex;
  justify-content: space-between;
  align-items: center;


.facebook:before 
  display: flex;
  justify-content: center;
  content: "\f39e";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;

 
.linkedIn 
  border-right: 2px solid green;
  border-left: 2px solid green;


.linkedIn:before 
 display: flex;
 justify-content: center;
 content: "\f0e1";
 font-family: "Font Awesome 5 Brands";
 font-weight: 900;
 color: blue;

 
.instagram:before 
  display: flex;
  justify-content: center;
  content: "\f16d";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<div class="contactSocial">
  <div class="facebook">Facebook</div>
  <div class="linkedIn">LinkedIn</div>
  <div class="instagram">Instagram</div>
</div>

【问题讨论】：

在 CSS3 中引入了伪元素使用双冒号。在这种情况下，它将变为::before 和::after。仅供参考。 【参考方案1】：

如果您要更改您的标记，最简单的方法是将标签包装到span 并应用边框对于这些span 元素 - 请参见下面的演示：

.contactSocial 
  display: flex;
  justify-content: space-between;
  align-items: center;


.facebook:before 
  display: flex;
  justify-content: center;
  content: "\f39e";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;

 
.linkedIn span  /* CHANGED */
  border-right: 2px solid green;
  border-left: 2px solid green;


.linkedIn:before 
 display: flex;
 justify-content: center;
 content: "\f0e1";
 font-family: "Font Awesome 5 Brands";
 font-weight: 900;
 color: blue;

 
.instagram:before 
  display: flex;
  justify-content: center;
  content: "\f16d";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<div class="contactSocial">
  <div class="facebook"><span>Facebook</span></div>
  <div class="linkedIn"><span>LinkedIn</span></div>
  <div class="instagram"><span>Instagram</span></div>
</div>

【讨论】：

【参考方案2】：

图标和文字边框

将图标移到 tekst 元素之外。然后在 tekst 元素上设置边框。

.contactSocial 
  display: flex;
  justify-content: space-between;
  align-items: center;


.iconFacebook:before 
  display: flex;
  justify-content: center;
  content: "\f39e";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;

.facebook 
  border: 5px solid cornflowerblue;

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<div class="contactSocial">
  <div>
    <div class="iconFacebook"></div>
    <div class="facebook">Facebook</div>
  </div>
  <div class="linkedIn">LinkedIn</div>
  <div class="instagram">Instagram</div>
</div>

【讨论】：

我使用了上面的答案，但信息量很大，谢谢！每个用户都可以设置 Krull 列出答案的顺序。我认为您的意思是您使用了公认的答案。我认为你不应该仅仅因为你使用了它就接受它。【参考方案3】：

我想你想要这个。如果不是，请告诉我。

.contactSocial 
  display: flex;
  justify-content: space-between;
  align-items: center;


.facebook:before 
  position: absolute;
  display: flex;
  justify-content: center;
  content: "\f39e";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;

 
.linkedIn 
  border-right: 2px solid green;
  border-left: 2px solid green;
  position: relative;


.linkedIn:before 
 display: flex;
 justify-content: center;
 content: "\f0e1";
 font-family: "Font Awesome 5 Brands";
 font-weight: 900;
 color: blue;
 position: absolute;
 width: 100%;
 bottom: 90%;

 
.instagram:before 
  display: flex;
  justify-content: center;
  content: "\f16d";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<div class="contactSocial">
  <div class="facebook">Facebook</div>
  <div class="linkedIn">LinkedIn</div>
  <div class="instagram">Instagram</div>
</div>

【讨论】：

以上是关于边框只占用元素而不是伪元素的主要内容，如果未能解决你的问题，请参考以下文章