Границы занимают только элемент, а не псевдоэлемент - PullRequest
Новая
       10

Границы занимают только элемент, а не псевдоэлемент

0 голосов
/ 20 февраля 2019

Я создаю веб-сайт, на котором я хотел бы иметь некоторые границы помимо текста.А над ним несколько значков.Я хочу, чтобы граница занимала только текстовую область текста 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>

Ответы [ 3 ]

0 голосов
/ 20 февраля 2019

Я думаю, ты этого хочешь.Если это не так, скажите мне. 

.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>
0 голосов
/ 20 февраля 2019

Если вы измените разметку , простейшей вещью будет обернуть метки в span и применить к ним border 1008 * элемент - см. Демо ниже: 

.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>
0 голосов
/ 20 февраля 2019

Значок и текстовая граница

Переместите значки за пределы элемента 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>
...