КодSEOБлогИное

Квадратные скобки

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.

Квадратные скобки в HTML

текст [ содержимое ] текст
текст [ содержимое ] текст
текст
содержимое
содержимое

текст
<style>
span.brackets {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;  /* междустрочный интервал в Google Chrome лучше оставить normal */ 
}
</style>

текст
<span class="brackets">⎡<br>⎣</span> <span class="brackets">содержимое<br>содержимое</span> <span class="brackets">⎤<br>⎦</span>
текст
текст

содержимое
содержимое
содержимое


текст
<style>
span.brackets {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
</style>

текст
<span class="brackets">⎡<br>⎢<br>⎣</span> <span class="brackets">содержимое<br>содержимое<br>содержимое</span> <span class="brackets">⎤<br>⎥<br>⎦</span>
текст

Высокие квадратные скобки на CSS

содержимое
содержимое
содержимое
содержимое
<style>
.brackets {
  display: inline-block;
  position: relative;
  padding: .3em .5em;
}
.brackets::before,
.brackets::after {
  content: "";
  position:absolute;
  top: 0;
  width: .5em;
  height: 100%;
  border-width: 1px;
}
.brackets::before {
  left: 0;
  border-style: solid none solid solid;
}
.brackets::after {
  right: 0;
  border-style: solid solid solid none;
}
</style>

<div class="brackets">содержимое<br>содержимое<br>содержимое<br>содержимое</div>
Все комментарии