Как добавить границу :: after в div

Я пытаюсь добавить разделитель границы между верхней и нижней частями. Чтобы подчеркнуть это, я аннотировал изображение ниже, чтобы продемонстрировать это красной линией.

Пока я действительно борюсь с этим. Мне удалось показать белую линию. К сожалению, я не могу добиться, чтобы он составлял 100% контейнера .footer-border, оставляя отступы с обеих сторон, как показано на красной линии. Каждый раз, когда я пытаюсь использовать 100% в контейнере, он ломается и уходит с правой стороны страницы, как видно по текущей белой линии.

Как добавить границу :: after в div

<footer>
    <section class = "footer-top">
        <div class = "container">
            <div class = "row footer-border">


                    <div class = "col-md-3 footer-top-one">
                        <a title = "Contrast" class = "footer-logo" href = "<?php echo site_url() ?>"><img src = "<?php echo esc_url( get_template_directory_uri() )?>/assets/img/contrast-logo-white-horizontal.svg"></a>
                        <p>We are a specialist eCommerce digital marketing agency. As our name suggests, we do things differently.</p>
                        <a target = "_blank" href = "https://www.facebook.com/contrast.digital/"><i class = "fab fa-facebook-f"></i></a>
                        <a target = "_blank" href = "https://twitter.com/contrasttalk"><i class = "fab fa-twitter"></i></a>
                        <a target = "_blank" href = "https://www.linkedin.com/company/contrastuk/"><i class = "fab fa-linkedin-in"></i></a>
                        <a target = "_blank" href = "https://www.instagram.com/contrast.digital/"><i class = "fab fa-instagram"></i></a>
                        <a target = "_blank" href = "https://www.youtube.com/channel/UCb4cTmxtsT-Wdcdi4mmsx9Q?view_as=subscriber"><i class = "fab fa-youtube"></i></a>
                    </div>

                    <div class = "col-md-2 footer-top-three">
                        <h4>Discover</h4>
                        <nav class = "navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role = "navigation">       
                        <?php
                        wp_nav_menu( array(
                            'theme_location'    => 'footer_discover',
                            'depth'             => 2,
                            'container'         => 'div',
                            'container_id'      => 'footer-top-nav',
                            'menu_class'        => 'nav navbar-nav ml-auto',
                            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                            'walker'            => new WP_Bootstrap_Navwalker()
                        ) );
                        ?>
                        </nav>
                    </div>

                    <div class = "col-md-2 footer-top-two">
                        <h4>Derby</h4>
                        <p>St George Court, Alfreton Rd</p>
                        <p>Derby</p>
                        <p>DE21 4AP</p>
                        <b><a href = "tel:+01332300583"><p class = "footer-phone-number">01332 300 583</p></a></b>
                        <b><a href = "/contrast/contact/" target = "_top"><p>Contact Our Team</p></a></b>
                    </div>

                    <div class = "col-md-2 footer-top-two">
                        <h4>Nottingham</h4>
                        <p>26-30 Stoney St</p>
                        <p>Nottingham</p>
                        <p>NG1 1LL</p>
                        <b><a href = "tel:+01332300583"><p class = "footer-phone-number">01332 300 583</p></a></b>
                        <b><a href = "/contrast/contact/" target = "_top"><p>Contact Our Team</p></a></b>
                    </div>

                    <!-- <div class = "col-md-2 footer-top-four">
                        <h4>Resources</h4>
                        <nav class = "navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role = "navigation">
                        <?php
                        wp_nav_menu( array(
                            'theme_location'    => 'footer_resourses',
                            'depth'             => 2,
                            'container'         => 'div',
                            'container_id'      => 'footer-top-nav',
                            'menu_class'        => 'nav navbar-nav ml-auto',
                            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                            'walker'            => new WP_Bootstrap_Navwalker()
                        ) );
                        ?>
                        </nav>
                    </div> -->

                    <div class = "col-md-3 footer-top-five">
                        <h4>Growth Strategies</h4>
                        <p>We’ll send you growth strategies you can implement yourself to give your eCommerce business the competitive edge it deserves.</p>
                        <a class = "clear footer-cta" title = "Send Me Growth Strategies" href = "/contrast/newsletter/"><button>Send Me Growth Strategies</button></a>
                    </div>


            </div>
        </div>
    </section>
    <section class = "footer-bottom">
        <div class = "container">
            <div class = "row justify-content-between">
                <div class = "col-lg-auto">
                  <p>Company Reg No. 11332749</p>
                </div>
                <div class = "col-lg-auto">
                  <p>Copyright &copy; <?php echo date("Y"); ?> Contrast Digital Ltd</p>
                </div>
                <div class = "col-lg-auto p0">
                    <nav class = "navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role = "navigation">
                    <?php
                    wp_nav_menu( array(
                        'theme_location'    => 'footer_privacy',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_id'      => 'footer-privacy-nav',
                        'menu_class'        => 'nav navbar-nav ml-auto',
                        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                        'walker'            => new WP_Bootstrap_Navwalker()
                    ) );
                    ?>
                    </nav>
                </div>
            </div>
        </div>
    </section>
</footer>

    footer {

    background: $black;
    margin: 30px;
    color: $white;
    margin-top: 30px;

    section.footer-top {

        padding: 40px 0;

        .footer-border::before {
            content:'';
            position: absolute;
            border-bottom: 1px solid $white;
            width: 100%;
        }

        p {
            font-size: 0.762em;
        }

        .footer-logo img {
            width: 170px;
            margin-bottom: 10px;
        }

        h4 {
            margin-top: 0;
        }

        .footer-top-one p {
            margin-bottom: 20px;
        }

        a i.fab {
            padding-right: 10px;
            color: $white;
        }

        .footer-top-two {

            b {
                font-weight: 400;
            }

            a { 

                &:hover {
                    color: $white;
                }
                p { 
                    color: $white;
                }
            }

            .footer-phone-number {
                margin-top: 20px;
            }

            p {
                margin-bottom: 0;
            }
        }

        ul#menu-footer-discover-menu, ul#menu-footer-resources-menu {

            margin-top: 0;
            display: inline;

            a.nav-link {
                color: $white;
                font-size: 0.762em;
                padding: 0;
            }
        }

        a.clear.footer-cta {

            margin-left: 0;

            button {

                padding: 10px 31px;
                color: $white;
                font-size: 0.714em;
                background-color: Transparent;
                background-repeat: no-repeat;
                border: solid $white 1px;
                cursor: pointer;
                overflow: hidden;
                outline: none;

                &:hover {
                    background-color: $white;
                    border: solid 1px $white;
                    color: $black;
                }
            }
        }

    }

    section.footer-bottom {

        padding: 40px 0;

        p {
            font-size: 0.667em;
            color: $white;
            text-align: center;
            margin-bottom: 0;
        }
    }

    #menu-footer-privacy-menu {
        margin-top: 0px;
    }

    #footer-privacy-nav a.nav-link {
        color: $white;
        font-size: 0.667em;
        padding: 0;
    }

    #footer-privacy-nav .menu-item {
        position:relative;
        margin-right: 20px;
        &:last-of-type {
            margin-right: 0;
        }
    }

    #footer-privacy-nav .menu-item:hover::after, #footer-privacy-nav .menu-item.current-menu-item:after {
        content:'';
        position: absolute;
        width: 110%;
        height: 0;    
        left: -5%;
        right: 5%;
        bottom: -10px;
        border-bottom: 1px solid $white;  
    }

    #footer-privacy-nav .menu-item:active::after {
        content:'';
        position: absolute;
        width: 110%;
        height: 0;    
        left: -5%;
        right: 5%;
        bottom: -10px;
        border-bottom: 1px solid $white; 
    }
}

.footer-bottom:before {
    content:'';
    position: absolute;
    width: auto;
    height: 0;    
    left: 0;
    border-bottom: 1px solid $white;  
}

почему вы не можете использовать border-top или border-bottom?

G-Cyrillus 16.08.2018 16:33

Прочитав ваше очень простое предложение, я спросил себя, почему я этого не сделал. Я считал, что пробовал это в первую очередь, и у меня не получилось поместить его в контейнер. Я буквально только что вернулся, и мне удалось это реализовать. Понятия не имею, почему я решил все усложнить.

Elliott Davidson 16.08.2018 16:43
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
2
389
1

Ответы 1

Вы можете попробовать это

footer{
  width:100%;
  overflow:hidden;
  display:inline-block;
   border:1px solid #000000;
}

.container{
 margin: 20px; 
 
}
.footer-border{
 height:100px;
 position:relative;
}
.footer-border:after{
  position :absolute;
  left:0;
  right:0;
  bottom:0;
  content:"";
  height:1px;
  width:100%;
  background-color:#ff0000;
}
.footer-border:before{
  position :absolute;
  left:0;
  right:0;
  top:0;
  content:"";
  height:1px;
  width:100%;
  background-color:#ff0000;
}
<footer>
  <div class = "container">
    <div class = "footer-border">

    </div>
  </div>
</footer>

Другие вопросы по теме