制作两个方格：上课前

Question

我试图在我的标题之前制作两个正方形。我知道怎么用前一课制作一个正方形，但我不知道如何制作两个宽度相同的正方形。

我想要的是这样的事情：

Answer 1

您只需按:before fiddle即可实现此目的。

<强> HTML

<h1>Reference</h1>

<强> CSS

h1{
    font-size: 24px;
    color:blue;
}
h1:before{
    content:"";
    display:inline-block;
    margin-right:10px;
    height:30px;
    width:5px;
    border-left:solid 10px blue;
    border-right:solid 5px blue;
    vertical-align:top;
}

Answer 2

您还需要创建after伪元素。如果以下代码有帮助，请告诉我。

＆＃13;

＆＃13;

h1 {
  position: relative;
  color: #A0CD62;
  line-height: 1;
  font-weight: 300;
}
h1:before {
  content: '';
  display: inline-block;
  width: 0.25em;
  height: 1em;
  margin-right: 0.25em;
  border-left: 0.5em solid $color-pistashio;
  border-right: 0.25em solid $color-pistashio;
}

＆＃13;

<h1>Referencer</h1> 

＆＃13;

＆＃13;

＆＃13;

Answer 3

.square {background-color:green; width:100px; height:100px;}

.square:before {content:""; background-color:white; position:absolute; width:20px; height:100px; left:50px; }

<div class="square">

    </div>

只需将颜色从绿色更改为更亮的绿色：D。

基本上我做的是。创建了一个绿色背景的大绿色d​​iv。然后使用'：before'在其顶部添加白色内容，其高度与div相同。

这应该有用。

如果有帮助，请告诉我。 ：）

Answer 4

我不认为你只能在sudo课前做到这一点。这是一个快速的笔，它同时适用于：before和：after。您应该能够随心所欲地满足您的需求。 http://codepen.io/sharperwebdev/pen/epgeNQ

.logo {
  position: relative;
  color: green;
  padding: 20px;
  left: 50px;
}
.logo:before {
  content: "";
  position: absolute;
  left: -50px;
  background-color: green;
  width: 30px;
  height: 30px;
}
.logo:after {
  content: "";
  position: absolute;
  left: -10px;
  background-color: green;
  width: 20px;
  height: 30px;
}

为什么不创建一个徽标svg？