css 黑魔法 （有感）

[mishe]

改变 input textarea 焦点光标的颜色

老办法：

input,textarea {
   color: rgb(60, 0, 248); /* 光标的颜色*/ 
   text-shadow: 0px 0px 0px #D60B0B; /* 文本颜色 */ 
   -webkit-text-fill-color: transparent;
 }
 input::-webkit-input-placeholder{ 
   color: rgb(60, 0, 248); 
   text-shadow: none; -webkit-text-fill-color: initial;
 }

新办法

input,textarea{
  caret-color: red;
}

新办法是简单了，但有兼容问题

利用 CSS 的 content 属性 attr 抓取资料

<div data-msg="Open this file in Github Desktop">  
hover
</div>
div{
width:100px;
border:1px solid red;  
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size: 12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px solid green;
}

实现鼠标悬浮内容自动撑开的过渡动画

<ul>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
</ul>
.bd {
  max-height:0;
  overflow:hidden;
  transition: all 1s ease-out;
}
li:hover .bd {
  max-height: 600px;
  transition-timing-function: ease-in;
}

文本两端对齐

老办法

<p class="center">我是两端对齐文字端对齐文字</p>
.center{
  text-align:justify;
}
.center:after{
  content:'';width:100%;display:inline-block;
}

新办法

<p class="center">我是两端对齐文字端对齐文字</p>
.center{
  text-align:justify;
  text-align-last:justify;
}

但是 text-align-last 的兼容性不太好

[cssmagic]

手动点赞，涨姿势 😉