How to reduce the length of a double border?

Question

I have managed to create this double border that I need, but do not know how to reduce its length to 80VW without the entire header reducing as well. Is anybody able to help me please?

header {
  position: relative;
  border-bottom-style: solid;
  border-bottom-color: #339966;
  border-bottom-width: 2px;
  padding-bottom: 2em;
}
header:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 5px;
  border-bottom: 5px solid #339966;
}

<header>
  <h1>THE CODE REVIEW</h1>
  <h2>Signup for our newsletter</h2>
  <p>Get the latest news on how your code is doing right in your inbox</p>
</header>

score 3 · Accepted Answer · edited May 23 '17 at 11:44

You can get rid of the border on the header element, and create both borders with ::before and ::after pseudo-elements.

header {
    position: relative;
    padding-bottom: 2em;
    /* border-bottom-style: solid; */
    /* border-bottom-color: #339966; */
    /* border-bottom-width: 2px; */
}
header::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    /* left: 0; */
    /* right: 0; */
    bottom: 6px;
    border-bottom: 5px solid #339966;
    width: 80vw;                         /* NEW */
    left: 50%;                           /* NEW */
    transform: translateX(-50%);         /* NEW */
}
header::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    /* left: 0; */
    /* right: 0; */
    bottom: 0;
    border-bottom: 2px solid #339966;
    width: 80vw;                         /* NEW */
    left: 50%;                           /* NEW */
    transform: translateX(-50%);         /* NEW */
}

<header>
    <h1>THE CODE REVIEW</h1>
    <h2>Signup for our newsletter</h2>
    <p>Get the latest news on how your code is doing right in your inbox</p>
</header>

jsFiddle

For an explanation on the left and transform centering method, see here: Element will not stay centered, especially when re-sizing screen

Thank you Michael_B. That worked. Your help is much appreciated. What does the transform: translateX(-50%); — T.XL, Aug 04 '16 at 00:37
sory didn't finish, what does the transform: translateX(-50%); do? — T.XL, Aug 04 '16 at 00:37

How to reduce the length of a double border?

1 Answers1

jsFiddle