only for edge

by Jens Kühn

HTML

<div class="onlyForEdge">
  <p>Das ist leider nicht für Microsoft Egde Browser optimiert!</p>
  <section>
    <p class="stay">Sie können weiterhin bei Microsoft Edge bleiben, naja...</p>
    <b>oder</b>
    <p class="go">Sie installieren sich einen "richtigen" Browser!</p>
  </section>
</div>

SCSS

.onlyForEdge {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  p {
    border: 1px solid #dedede;
    padding: 4px 8px;
  }
  
  section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    margin-top: 25px;
    
    p {
      max-width: 250px;
      display: flex;
      align-items: center;
      text-align: center;
      position: relative;
      margin: 0 8px;
      
      &.go {
        border-color: green;
      }
      
      &::before,
      &::after {
        content: '';
        border: 1px solid #ebebeb;
        position: absolute;
      }
      &::before {
          top: -40px;
          width: 25%;
          height: 20px;
        }
        &::after {
          top: -19px;
          width: 25%;
          height: 12px;
        }
      
      &.stay {
        &::before {
          left: 50%;
          border-width: 0 1px 1px 0;
        }
        &::after {
          left: 50%;
          border-width: 0 0 0 1px;
        }
      }
       &.go {
        &::before {
          right: 50%;
          border-width: 0 0 1px 1px;
        }
        &::after {
          right: 50%;
          border-width: 0 1px 0 0;
        }
      }
    }
  }
}