Создавать заголовок с признака rel с css

Holas, я стараюсь создавать заголовок внутри блока pre через Ваш признак rel, немного как это:

introducir la descripción de la imagen aquí

поскольку они будут видеть в изображении, есть заголовок с текстом у HTML, я хочу добиться нечто похожего, но не смог, это мой код pre:

pre.block,
{
background-color: #fafafa !important;
/*-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;*/
color: #000000;
padding: 5px;
border: 1px solid #c9c9c9;
overflow: auto;
margin-left: 10px;
font-size: 13px;
width: 95%;
white-space: pre-wrap;
font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
}

Я попробовал делать один: after, но у меня оставался текст очень далеко от контейнера: будет возможно делать или будет лучший способ это делать?

Привет.

1
задан 18.05.2016, 02:29
2 ответа

Ты можешь упрощать это больше, чем это. Поверьте div контейнер, которому ты даешь общий формат, и на заголовок практически ты не будешь должен выходить ему больше, чем цвета:

.wrapper{
  width: 95%;
  margin: 10px;
  font-family: Consolas, "Bitstream Vera Sans Mono";
  background-color: #000000;
  color: #9c6031;
}
.header
{
  background-color: #399c42;
  color: #ffffff;
  padding: 10px;
  border: 0;
  font-size: 15px;
}
.content
{
  padding: 15px;
}
<div class="wrapper">
  <div class="header">HTML</div>
  <div class="content">Lorem ipsum....</div>
</div>

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

0
ответ дан 24.11.2019, 14:21
  • 1
    Большое спасибо! уже adapt и # 233; и останься совершенным! спасибо! –  Enecumene 18.05.2016, 03:21

Ты можешь делать это используя псевдо-элемент ::before (он сделает тебе жизнь более легкую, которая ::after если то, что ты хочешь, является титулом) без необходимости не создавать никакой добавочной этикетки. С content:attr(nombre-de-atributo) ты можешь читать имя, которое будет класться в титуле, и определять это как блок для того, чтобы он занял всю ширину контейнера.

Здесь я оставляю пример (я помещаю ему отрицательные края, потому что я поместил padding в pre для того, чтобы он был похож больше на изображение, которое ты поместил):

pre {
  background:#222222;
  color:#CC9900;
  padding:8px;
}

pre::before {
  content:attr(rel);
  display:block;
  background:green;
  color:white;
  margin:-8px -8px 8px -8px;
  padding:8px;
}
<pre rel="CSS">
p { color:red; }
</pre>
0
ответ дан 24.11.2019, 14:21