html 文本横竖切换,html – 如何在伪元素中旋转文本?

我正在尝试使用css变换值旋转(90度)为屏幕顶部的选项卡旋转双角括号设置作为内容:after伪元素.这是相关的代码:

.header {

-moz-transition: top .5s ease;

-webkit-transition: top .5s ease;

-o-transition: top .5s ease;

transition: top .5s ease;

position: absolute;

left: 0;

right: 0;

top: -60px;

height: 80px;

background-color: #2d2;

}

.header.in-top {

top: 0;

}

.header-tab {

position: absolute;

bottom: 0;

width: 100%;

height: 20px;

text-align: center;

color: #000;

-moz-transition: color .5s ease;

-webkit-transition: color .5s ease;

-o-transition: color .5s ease;

transition: color .5s ease;

}

.header-tab:hover {

color: #e22;

}

.header-arrow:after {

font-size: 20px;

line-height: 1;

-moz-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

-o-transform: rotate(90deg);

transform: rotate(90deg);

}

.header .header-arrow:after {

content: "\00bb";

}

.header.in-top .header-arrow:after {

content: "\00ab";

}

数据切换属性在JavaScript中用于切换顶级类,以便切换双尖括号的方向,以及通过将其降低来暴露标题的内容.我指定的转换属性似乎没有做任何事情.有解决方案吗

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值