it-roy-ru.com

Три точки ниже блочного элемента

Я хотел создать что-то вроде рисунка ниже, но не уверен, как это сделать!

Заголовок с тремя точками

 enter image description here

Поэтому я хотел отобразить только 3 точки в центре под моим заголовком. Но когда я пытаюсь использовать dottedborder-bottom, он принимает весь тег <h1>.

h1{
  text-align: center;
  font-size: 50px;
  color: red;
  border-bottom: 10px dotted red;
}
<h1>My Title</h1>

27
kumar

Попробуйте что-то вроде приведенного ниже фрагмента. Используйте пролеты, чтобы создать точки и выровнять их по центру.

h1 {
  text-align: center;
  font-size: 50px;
  margin-bottom: 10px;
  color: red;
}

.three-dots {
  text-align: center;
}

.three-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  display: inline-block;
  margin: 0 5px;
}
<h1>My Title</h1>
<div class="three-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

Update: Да, конечно, я принимаю, что это не идеальное решение. Но в то же время я уверен, что это будет одним из лучших решений, в котором вы можете настроить каждую точку разным цветом и размером простым способом, как показано ниже. В противном случае я бы согласился Маниш Патель ответ является лучшим.

h1 {
  text-align: center;
  font-size: 50px;
  margin-bottom: 10px;
  color: red;
}

.three-dots {
  text-align: center;
}

.three-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  display: inline-block;
  margin: 0 5px;
}

span.first {
  background-color: green;
  width: 10px;
  height: 10px;
}

span.third {
  background-color: blue;
  width: 20px;
  height: 20px;
}
<h1>My Title</h1>
<div class="three-dots">
  <span class="first"></span>
  <span class="second"></span>
  <span class="third"></span>
</div>

3
RaJesh RiJo

Для этого использовался псевдоэлемент ::after

h1{
  text-align: center;
  font-size: 50px;
  color: red;
  line-height: 30px;
}
h1::after{
  content:"...";
  font-size: 50px;
  color: gold;
  display: block;
  text-align: center;
  letter-spacing: 5px;
}
<h1>My Title</h1>

54
Manish Patel

Один псевдоэлемент и несколько теней. (падение или коробка)

Примечание: с помощью этого метода вы можете контролировать цвет каждой точки .

Drop Shadow

  h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: .25em;
  height: .25em;
  border-radius: 50%;
  background: orange;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
  filter: drop-shadow(.5em 0px 0px blue) 
          drop-shadow(-.5em 0px 0px green);
}
<h1>My Title</h1>

Box Shadow (спасибо Ильмари Каронен)

  h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: .25em;
  height: .25em;
  border-radius: 50%;
  background: orange;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
  box-shadow: .5em 0px 0px blue, 
              -.5em 0px 0px green;
}
<h1>My Title</h1>

29
Paulie_D

Используйте ::after псевдоэлемент.

h1{
  text-align: center;
  font-size: 50px;
}
h1:after{
  content: "";
  display: block;
  width: 50px;
  margin: 10px auto;
  border-bottom: 10px dotted red
}
<h1>My title</h1>

11
wscourge

Тот же Маниш-Патель ответ, но ...

Как я предпочитаю

  • не заставлять размер шрифта
  • используйте адаптивную единицу измерения размера em вместо фиксированной pt или px.
  • K eep I t S hort и S Implement

Это будет использовать UTF-8, один из черный круг:

&#10625;   U+2981    Z NOTATION SPOT          ⦁
&#8226;    U+2022    BULLET                   •
&#9679;    U+25CF    BLACK CIRCLE             ●
&#9899;    U+26AB    MEDIUM BLACK CIRCLE      ⚫
&#11044;   U+2B24    BLACK LARGE CIRCLE       ⬤

h1{
  text-align: center;
  line-height: 1.3em;
}
h1::after{
  content:"⚫ ⚫ ⚫";
  color: gold;
  display: block;
}
<h1>My Title</h1>

С небольшим улучшением: добавление размытия границы для точек

h1        { text-align: center; line-height: 1.3em; }
h1::after { content:"⚫ ⚫ ⚫"; color: gold; display: block;
            text-shadow: 0em 0em .12em #530; }
<h1>My Title</h1>

4
F. Hauri

Просто используйте псевдо-селектор :: after и определите line-height для элемента h1, чтобы расположить точки по вертикали на расстоянии от заголовка. Используйте Georgia в качестве веб-шрифта для точек, так как Arial имеет квадратные точки.

Помните, что вы можете использовать оба синтаксиса, но предпочтительно использовать ::after, чтобы отличать псевдоклассы От псевдоэлементов.

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

CSS3 ввел нотацию :: after (с двумя двоеточиями), чтобы различать псевдоклассы из псевдоэлементов. Браузеры также принимают: после, введено в CSS2. Предостережения

h1{
  text-align: center;
  font-family: Arial;
  font-size: 40px;
  color: black;
  line-height: 20px;
}

h1::after {
   content: '...';
   display: block;
   font-family: Georgia, sans-serif;
   font-size: 100px;
   color: #FEC832;
}
<h1>My Heading</h1>

4
Alessandro Incarnati

Решение с flexbox:

h1 {
  text-align: center;
  font-size: 48px;
  color: black;
  line-height: 24px;
}
h1::after {
    content: "...";
    font-size: 72px;
    color: gold;
    display: flex;
    justify-content: center;
    letter-spacing: 5px
}
<h1>
  My Heading
</h1>

0
Gerard Simpson

Вот еще одно решение, аналогичное решению Paulie_D , но вместо тени-тени/box-shadow я буду полагаться на несколько радиальных градиентов для создания каждого круга. Затем вы можете легко контролировать число кругов, их положение, цвета и размер.

3 круга по мере необходимости

h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: 1.5em;
  height: .25em;
  background: radial-gradient(circle at center, blue 50%,transparent 51%) 0 -4px/11px 21px no-repeat, 
              radial-gradient(circle at center, orange 50%,transparent 51%) .6em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, green 50%,transparent 51%) 1.2em -4px/11px 21px no-repeat;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
}
<h1>My Title</h1>

5 кругов (а мы идем на любые номера)

h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: 1.5em;
  height: .25em;
  background: radial-gradient(circle at center, blue 50%,transparent 51%) 0 -4px/11px 21px no-repeat, 
              radial-gradient(circle at center, orange 50%,transparent 51%) .3em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, brown 50%,transparent 51%) .6em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, pink 50%,transparent 51%) .9em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, green 50%,transparent 51%) 1.2em -4px/11px 21px no-repeat;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
}
<h1>My Title</h1>

0
Temani Afif