html定义单选,html – 使用css的自定义单选按钮

我正在尝试创建自定义单选按钮,如下图所示.

我编写了代码,能够实现正确的样式,但无法在单选按钮之前显示标签.

.lengend-action-buttons {

float: left;

margin-left: 10px;

margin-top: 10px;

}

label {

font-weight: normal;

font-size: 14px;

Font-Family: Metric-Regular;

Color: #666666;

display: block;

cursor: pointer;

}

[type="radio"] {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

width: 1px;

}

[type="radio"] + span:before {

content: '';

display: inline-block;

width: 1.1em;

height: 1.1em;

vertical-align: -0.10em;

border-radius: 1em;

border: 0.35em solid #fff;

box-shadow: 0 0 0 0.10em #36B18D;

margin-right: 0.75em;

transition: 0.5s ease all;

}

[type="radio"]:checked + span:before {

background: #36B18D;

box-shadow: 0 0 0 0.10em #36B18D;

}

[type="radio"]:focus + span::after {

font-size: 1.2em;

line-height: 1;

vertical-align: -0.125em;

}

1 Day

7 Day

30 Day

90 Day

请帮帮我,解决这个问题.