CSS не применяется, когда flex-дисплей используется в грани Microsoft

Question

Я пытаюсь применить границу до и после текста.Он работает во всех браузерах, кроме Microsoft Edge и Internet Explorer.Я использую display: flex и, пожалуйста, обратитесь к моему коду для деталей

Я попытался установить max-width на 100% и добавить box-sizing: border-box, но, похоже, не работает

const text = styled(div)`
    display: flex;
    align-items: center;
    color: gray;
    margin-bottom: 24px;
    ::before, ::after {
        content: '';
        width: 100%;
        border-top: 1px solid gray;
      }
    ::before {
        margin-right: 8px;
      }
    ::after {
        margin-left:8px;
  }
`;
<text>OR</text> 

Мне нужно, чтобы граница отображалась и в IE 11

Answer 1

Вдохновленный ответом @Carol McKay.Код может хорошо работать в Edge, но не работать в IE.Поэтому я изменил его, и ниже код может хорошо работать в Edge и IE11:

h1 {
     /* grid layout css */
     display: grid;
     align-items: center;
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     grid-gap: 8px;
     /* other css */
     color: gray;
     margin-bottom: 24px;
    }

h1::before, h1::after {
     content: "";
     display: block;
     border-top: 1px solid gray;
    }

<h1>OR</h1>

Answer 2

Для IE11 вам нужно сбросить display на псевдоэлементе и сбросить также flex-grow.

Ваш код становится:

const text = styled(div)`
    display: flex;
    align-items: center;
    color: gray;
    margin-bottom: 24px;
    ::before, ::after {
        content: '';
        display:block;
        flex-grow:1;
        border-top: 1px solid gray;
      }
    ::before {
        margin-right: 8px;
      }
    ::after {
        margin-left:8px;
  }
`;
<text>OR</text> 

Демонстрация ниже для запуска с IE

text {
  display: flex;
  align-items: center;
  color: gray;
  margin-bottom: 24px;
  width:100%;
}

 text::before,
 text::after {
  content: '';
  display:block;
  flex-grow:1 ;
  border-top: 1px solid gray;
}

 text::before {
  margin-right: 8px;
}

 text::after {
  margin-left: 8px;
}

<text>OR</text>

это то, что бродячий призрак-убийца бродит с IE5 ??

Answer 3

Вдохновлено видео Рэйчел Эндрю:

Сетка для достижения этой цели.

html:

<h1>OR</h1>

css:

h1 
{
   /* grid layout css */
   display: grid;
   align-items: center;
   gap: 8px;

   /* other css */
   color: gray;
   margin-bottom: 24px;
}

::before, ::after 
{
    content: '';
    border-top: 1px solid gray;
}

https://caniuse.com/#search=grid

Вы можете использовать flex с сеткой, обернутой в @supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports.

HTML-макет с использованием css в 2019 https://www.youtube.com/watch?v=5XsZnCwbgwA