纯CSS代码在WordPress Modown主题文章中添加亮点功能

所谓亮点功能，一般是用来介绍产品的优势、特色或功能等内容，并以模块的形式展示出来，页面看上去更为美观。之前在使用DUX主题时，用过此功能。网上关于添加亮点的功能，基本上也都是针对DUX主题的。

在这些教程中提到需要修改functions.php，也就是把相关的功能代码添加到functions.php文件中。不过实际测试下来，发现貌似有些问题，亮点功能并没有生效。

其实，使用纯css代码，就可以添加这项功能了，下面是我从QUX主题找到的代码：

/*---------------liangdian------------------*/
.liangdian{margin:0 -2% 10px 0 !important;padding:0;overflow:hidden;clear: both;}.liangdian li{float:left;position:relative;margin:0 2% 2% 0;width:31.33333%;padding:20px 20px;border-radius:2px;text-align:center;border:1px solid #eee;color:#aaa;font-size:12px;height:125px;overflow:hidden;line-height:1.6}.liangdian li::before{position:absolute;top:0;left:0;content:'';background-color:#eee;color:#bbb;line-height:1;padding:4px 5px;font-size:12px;border-radius:0 0 2px 0}.liangdian li:nth-child(1)::before{content:"亮点1"}.liangdian li:nth-child(2)::before{content:"亮点2"}.liangdian li:nth-child(3)::before{content:"亮点3"}.liangdian li:nth-child(4)::before{content:"亮点4"}.liangdian li:nth-child(5)::before{content:"亮点5"}.liangdian li:nth-child(6)::before{content:"亮点6"}.liangdian li:nth-child(7)::before{content:"亮点7"}.liangdian li:nth-child(8)::before{content:"亮点8"}.liangdian li:nth-child(9)::before{content:"亮点9"}.liangdian li:nth-child(10)::before{content:"亮点10"}.liangdian li:nth-child(11)::before{content:"亮点11"}.liangdian li:nth-child(12)::before{content:"亮点12"}.liangdian li:nth-child(13)::before{content:"亮点13"}.liangdian li:nth-child(14)::before{content:"亮点14"}.liangdian li:nth-child(15)::before{content:"亮点15"}.liangdian li:nth-child(16)::before{content:"亮点16"}.liangdian li:nth-child(17)::before{content:"亮点17"}.liangdian li:nth-child(18)::before{content:"亮点18"}.liangdian li:nth-child(19)::before{content:"亮点19"}.liangdian li:nth-child(20)::before{content:"亮点20"}.liangdian li:nth-child(21)::before{content:"亮点21"}.liangdian li:nth-child(22)::before{content:"亮点22"}.liangdian li:nth-child(23)::before{content:"亮点23"}.liangdian li:nth-child(24)::before{content:"亮点24"}.liangdian li:nth-child(25)::before{content:"亮点25"}.liangdian li:nth-child(26)::before{content:"亮点26"}.liangdian li:nth-child(27)::before{content:"亮点27"}.liangdian li:nth-child(28)::before{content:"亮点28"}.liangdian li:nth-child(29)::before{content:"亮点29"}.liangdian li:nth-child(30)::before{content:"亮点30"}.liangdian li:nth-child(31)::before{content:"亮点31"}.liangdian li:nth-child(32)::before{content:"亮点32"}.liangdian li:nth-child(33)::before{content:"亮点33"}.liangdian li:nth-child(34)::before{content:"亮点34"}.liangdian li:nth-child(35)::before{content:"亮点35"}.liangdian li:nth-child(36)::before{content:"亮点36"}.liangdian li:nth-child(37)::before{content:"亮点37"}.liangdian li:nth-child(38)::before{content:"亮点38"}.liangdian li:nth-child(39)::before{content:"亮点39"}.liangdian li:nth-child(40)::before{content:"亮点40"}.liangdian li:nth-child(41)::before{content:"亮点41"}.liangdian li:nth-child(42)::before{content:"亮点42"}.liangdian li:nth-child(43)::before{content:"亮点43"}.liangdian li:nth-child(44)::before{content:"亮点44"}.liangdian li:nth-child(45)::before{content:"亮点45"}.liangdian li:nth-child(46)::before{content:"亮点46"}.liangdian li:nth-child(47)::before{content:"亮点47"}.liangdian li:nth-child(48)::before{content:"亮点48"}.liangdian li:nth-child(49)::before{content:"亮点49"}.liangdian li:nth-child(50)::before{content:"亮点50"}.liangdian li:nth-child(51)::before{content:"亮点51"}.liangdian li:nth-child(52)::before{content:"亮点52"}.liangdian li:nth-child(53)::before{content:"亮点53"}.liangdian li:nth-child(54)::before{content:"亮点54"}.liangdian li:nth-child(55)::before{content:"亮点55"}.liangdian li:nth-child(56)::before{content:"亮点56"}.liangdian li:nth-child(57)::before{content:"亮点57"}.liangdian li:nth-child(58)::before{content:"亮点58"}.liangdian li:nth-child(59)::before{content:"亮点59"}.liangdian li:nth-child(60)::before{content:"亮点60"}.liangdian li::after{position:absolute;bottom:0;left:0;right:0;height:16px;content:'';background-color:#fff}.liangdian li:hover{border-color:#0ae}.liangdian li:hover::before{background-color:#0ae;color:#fff}.liangdian strong{display:block;font-size:15px;font-weight:bold;margin-bottom:5px;color:#555;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (max-width: 768px){.liangdian li{width:48%}}@media (max-width: 544px){.liangdian{margin:0 -2% 20px 0 !important}.liangdian li{height:102px;padding:18px 10px;line-height:1.4;font-size:11px}.liangdian li::before{font-size:10px;padding:4px;height:16px}.liangdian strong{font-size:12px}}

只是，在Modown主题中直接用上边的代码，会导致亮点模块下方的几行内容被隐藏或内容错位。而且，还有其他一些问题：