Как создать псевдо-элемент в форме треугольника для меню?

Question

EnigmaEthereal

wordpress , css , php , html

Как создать псевдо-элемент в форме треугольника для меню?

Здравствуйте, могли бы вы помочь мне разобраться в проблеме с позиционированием псевдо-элемента треугольника в меню? Сайт, который я разрабатываю, использует WordPress, сетку Bootstrap и адаптивную верстку. Я пытаюсь вставить псевдо-элемент в меню, но он почему-то располагается не на том месте, где я ожидаю его видеть. Моя цель — сделать его справа. Вот часть кода шапки: https://codepen.io/Xva1er/pen/GRzVKmm

16 декабря 2023 г. 20:16

Ответы на вопрос 1

Похожие вопросы

Answer 1

Проблема возникает из-за того, что вы позиционируете псевдо-элемент `.sub-menu::before` c абсолютным позиционированием внутри меню `.sub-menu`, но не указываете родительскому элементу `.menu-item-has-children` относительное (или абсолютное) позиционирование. Как решение, вы можете добавить следующий CSS-код:

```css
.menu-item-has-children {
  position: relative;
}

.sub-menu::before {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  right: -10px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000;
}
```

Этот код задаст родительскому элементу `.menu-item-has-children` относительное позиционирование, а `right: -10px;` и `transform: translateY(-50%);` в `.sub-menu::before` помогут разместить псевдо-элемент справа от родительского элемента и выровнять его по вертикали.