按钮上的锚标记之间的文本未显示

Question

由于某种原因，我无法在按钮上的锚标记之间显示文本。

下面是我的HTML和CSS代码。 CSS是here的直接副本，但有一些修改。

我无法弄清楚哪里出了问题。

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font: bold 14px/1.4 'Open Sans', arial, sans-serif;
    background: #EBF0DC;
}

ul {
    margin: 150px auto 0;
    padding: 0;
    list-style: none;
    display: table;
    width: 600px;
    text-align: center;
}

li {
    display: table-cell;
    position: relative;
    padding: 15px 0;
}

a {
    color: rgb(7, 5, 5) !important;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;
    display: inline-block;
    padding: 15px 20px;
    position: relative;
}

ul a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: rgb(233, 108, 25);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

a:hover:after {
    width: 100%;
    left: 0;
}

@media screen and (max-height: 300px) {
    ul {
        margin-top: 40px;
    }
}


/* Navigation ends here */

h1 {
    color: #ff4411;
    font-size: 48px;
    font-family: 'Signika', sans-serif;
    padding-bottom: 10px;
    text-align: center;
}


/* Button */

.container {
    padding-top: 1em;
    margin-top: 1em;
    border-top: solid 1px #CCC;
    width: 200px;
    margin: 20px auto;
}

a.button {
    display: block;
    position: relative;
    float: left;
    width: 120px;
    padding: 0;
    margin: 30px;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
    transition: all 0.2s;
}


/* FLOAT */

.btnFloat:before {
    content: 'Float';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 50px;
    border-radius: 5px;
    transition: all 0.2s;
}

.btnBlueGreen.btnFloat:before {
    background: #00AE68;
}

.btnLightBlue.btnFloat:before {
    background: #5DC8CD;
}

.btnOrange.btnFloat:before {
    background: #FFAA40;
}

.btnFloat:before {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4);
}

.btnFloat:hover:before {
    margin-top: -2px;
    margin-left: 0px;
    transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.25);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="You can get coached on anything. Always free.">
    <title>Careless2Naysayers | Life Coaching by Pradeep Kumar P</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div>
        <h1>CareLess2Naysayers</h1>
    </div>

    <div class="container">
        <a href="#" class="button btnFloat btnBlueGreen">Students</a>
        <a href="#" class="button btnFloat btnLightBlue">Teachers</a>
        <a href="#" class="button btnFloat btnOrange">Parents</a>
    </div>

</body>

</html>

这就是它的显示方式。正如您所看到的，出现了“浮动”一词，而不是我想要的那个。

Answer 1

此问题可以通过下面添加的更新CSS代码来解决。

.btnFloat:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 50px;
    border-radius: 5px;
    transition: all 0.2s;
    z-index: -1;
}

Answer 2

似乎您已忘记关闭样式表的<link />标签。这应该是：

<link rel="stylesheet" href="./css/style.css" />

NOT

<link rel="stylesheet" href="./css/style.css">

体面的短绒棉将捡起并自动为您修复。我建议使用VS Code编辑器或CodeSandbox编写代码（如果尚未编写）。两者都会为您解决此错误。

这里是您的代码的工作副本：

https://codesandbox.io/s/so-60238171-demo-closing-tag-ep8hd?fontsize=14&hidenavigation=1&theme=dark

希望有帮助

按钮上的锚标记之间的文本未显示

问题描述投票：0回答：2

2个回答

最新问题

按钮上的锚标记之间的文本未显示

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2