Question

我希望方括号包含文字，而不是去任何一边。我找了一个解决方案，但找不到一个，因此来到这里。我曾经尝试过以前用桌子做这个并没有成功。任何尝试都会有很大帮助！：d

电流： Current outcome 期望： Desired outcome HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="resources/css/styles.css">
    </head>
    <body>
        <div class="title">
            <h2>[</h2>
            <h1>BLOG TITLE HERE</h1>
            <h2>]</h2>
        </div>
        <ul>
            <li><a href="">Music for journeys</a></li>
            <li><a href="">Cake is good</a></li>
        </ul>
    </body>
</html>

CSS：

body {
    background-color:424242;
    font-family:ubuntu;
    font-size:15;
    color:FFF;
}

.title{
    width:100;
    text-align: justify;
    text-justify: auto;
}

h1{
    font-size:40;
}

h2{
    font-size:120;
}

ul {
    padding: 0;
    list-style-type: none;
}

a:link, a:visited {
    color:FFF;
    display: block;
    font-weight: bold;
    width: 200px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    border-style: solid;
    border-width:0;
    border-top-width:2;
    border-color:1C1C1C;    
}

Answer 1

CSS方括号。

改编自Article

JSFiddle Demo

＆＃13;

body {
  text-align: center;
}
h1 {
  font-size: 40px;
  position: relative;
  display: inline-block;
}
h1:before {
  content: " ";
  position: absolute;
  border-left: 2px solid #666;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
  padding: 5px;
  top: -10px;
  bottom: -10px;
  left: -5px;
}
h1:after {
  content: " ";
  position: absolute;
  border-right: 2px solid #666;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
  padding: 5px;
  top: -10px;
  bottom: -10px;
  right: -5px;
}

＆＃13;

 <h1>BLOG TITLE HERE</h1>

＆＃13;

Answer 2

将其显示设为inline-block。

.title h2,
.title h1 {
    display: inline-block;
    vertical-align: middle;
}

现在，使用它们的字体大小和边距来实现所需的效果。

.title h2 {
    font-size: 110px;
    margin: -10px 0px 0px 0px;
    padding: 0;
}

.title h1 {
    max-width: 90px;
    margin: 0;
    padding: 0;
}

Screenshot

请参阅fiddle，并进行进一步的调整。

Answer 3

您也可以使用伪元素::before和::after。

<强> CSS

.title h1 {
    font-size:45px;
    font-family:Arial;
    position:relative;
}

.title h1:before {
    content: "[ ";
    position:relative;
    top:-4px;
}

.title h1:after {
    content: " ]";
    position:relative;
    top:-4px;
}

Here's the fiddle.

编辑：根据您应该使用的新图片，在上面的解决方案中使用inline-block可能是最好的。

使用绝对定位的所需效果的CSS

.title {
    text-align:center;
}
.title h1 {
    font-size:45px;
    font-family:Arial;
    position:relative;
    display:inline-block;
}

.title h1:before {
    content: "[ ";
    position:absolute;
    top:-20px;
    left:-30px;
    font-size:80px;
}

.title h1:after {
    content: " ]";
    position:absolute;
    top:-20px;
    right:-30px;
    font-size:80px;
}

较大文本中的文本 - HTML / CSS

3 个答案: