Псевдоэлементы after :, before: , как получить прилипание линий по краям?

Question

.logo-holder {
    max-width: 22.5rem;
    width: 100%;
    padding: 0 .9375rem;
    margin: 0 auto 1.25rem;
    position: relative;
}

.logo-holder .logo {
    width: 3.75rem;
    margin: 0 0 1.5rem;
    text-align: center;
    position: static;
}

.logo-holder .img-block:first-child {
    margin: 0 -.625rem 0 0;
}

.logo-holder .img-block:last-child {
    margin: 0 0 -.155rem -.612rem;
}
.logo-holder:after,
.logo-holder:before {
    content: "";
    position: absolute;
    bottom: 3px;
    height: 2px;
    background: #343536;
    width: 100%;
        margin: 0.37rem;
    }

.logo-holder:before {
    left: 100%;
}

.logo-holder:after {
    right: 100%;
}

<div class="logo-holder d-flex align-items-end justify-content-center">

                <div class="logo">
                    <a href="#">
                        <img -label="Logo" gv-img="img" src="" width="50" alt="">
                    </a>
                </div>
                <div class="img-block">
                    <img src="" width="200" alt="image description">
                </div>
            </div>

При Responsive появляется горизонтальный скролл. Как получить прилипание линий по краям СТРАНИЦЫ и интерактивную адаптацию?

Answer 1

Например такой вариант:

body {
  margin: 0;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
}

.image::before,
.image::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: black;
}

.image img {
  display: flex;
  flex: 1 0 auto;
  max-width: 100%;
  max-height: 100%;
  border: 2px solid black;
  box-sizing: border-box;
}

<div class="image">
  <img src="https://i.imgur.com/cJQUF5s.png">
</div>
<div class="image">
  <img src="https://i.imgur.com/DnADg8m.png">
</div>

Костыльный способ

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  overflow: hidden auto; /* Запрещаем горизонтальный скролл */
}

.image {
  display: inline-flex
  max-width: 200px;
  height: 50vh;
  margin: 0 auto;
  position: relative;
}

.image::before,
.image::after {
  content: '';
  display: block;
  width: 50vw;
  height: 2px;
  background: black;
  position: absolute;
  top: calc(50% - 1px);
}

.image::before {
  left: 100%;
}

.image::after {
  right: 100%;
}

.image img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  border: 2px solid black;
  box-sizing: border-box;
}

<div class="image">
  <img src="https://i.imgur.com/cJQUF5s.png">
</div>
<div class="image">
  <img src="https://i.imgur.com/DnADg8m.png">
</div>

БЛОГ НА HUSL

Псевдоэлементы after :, before: , как получить прилипание линий по краям?

Ответы (1 шт):