鐪嬪埌涓€涓枃瀛楅珮浜紑鍏崇殑鏁堟灉锛屾劅瑙夊彲浠ユ敼鎴愭枃瀛楃増鐨勮繘搴︽潯鏁堟灉銆傚厛鐪嬫晥鏋滐細涓€姝ユ瀹炵幇鍐嶈瀹炵幇鎬濊矾銆傝繘搴︽潯鐨勬€濊矾鍩烘湰涓婂氨鏄簳閮ㄤ竴涓?00%鐨勮繘搴﹁妭鐐癸紝涓婇潰鍙犲姞涓€涓繘琛屼腑鐨勮繘搴﹁妭鐐广€傚悓鏍峰湪杩欓噷銆傛垜浠彲浠ヤ娇鐢ㄤ吉绫讳綔涓鸿繘绋嬩腑鐨勫彉鍖栬妭鐐广€備唬鐮佸涓嬶細鍐欎唬鐮佺殑娴╂旦鏈€甯咃紒锛?/span>.progress{color:#c7c7c7;}.progress::after{content:attr(data-txt);棰滆壊锛?0c6723锛沝isplay:inline-block;}鎵€浠ユ湁涓や釜鏂囨湰銆傜浜屾锛岃繘琛屼腑鐨勬枃瀛楅渶瑕佸彔鍔犲湪杩涘害涓?00%鐨勮妭鐐逛笂锛屾寜浣嶇疆鏉ュ畬鎴愩€備唬鐮佽皟鏁村涓嬶細.progress{color:#c7c7c7;浣嶇疆锛氱浉瀵癸紱}.progress::after{鍐呭锛歛ttr锛堟暟鎹?txt锛夛紱棰滆壊锛?0c6723锛涙樉绀猴細鍐呰仈鍧楋紱浣嶇疆锛氱粷瀵癸紱宸︼細0锛涢《閮細0锛涜儗鏅壊锛?c8edd1锛泈idth:100%;}鏀瑰彉after鐨勫搴︽潵鎺у埗杩涘害銆備絾鏄綋after鐨勫搴﹁緝灏忕殑鏃跺€欙紝浣犱細鍙戠幇鏂囧瓧琚埅鏂簡銆傝繖鏃跺€欐垜浠渶瑕佹坊鍔犱竴娈典笉鎴柇鐨勬枃瀛楋紝灏嗗浣欑殑閮ㄥ垎闅愯棌璧锋潵銆?progress::after{/*Codebefore...*/word-break:keep-all;绌虹櫧锛歯owrap锛涘搴︼細50%锛沷verflow:hidden;}鏈€鍚庣粰progress鑺傜偣娣诲姞涓€涓獁idth鍙樺寲杩囩▼锛岀敤鏉ユ帶鍒惰繘搴︽潯鐨勮繘搴︺€傚浣曢€夋嫨鎶€鏈柟妗堝彲浠ュ弬鑰冩垜涔嬪墠鐨勬枃绔犮€婁竴鏂囪娓呰繖闅炬悶鐨凜SS鍔ㄧ敾銆嬨€傝繖閲屾垜浣跨敤杩囨浮銆備唬鐮佸涓嬶細.progress::after{content:attr(data-txt);棰滆壊锛?0c6723锛涙樉绀猴細鍐呰仈鍧楋紱浣嶇疆锛氱粷瀵癸紱宸︼細0锛涢《閮細0锛涘垎璇嶏細淇濈暀鎵€鏈夛紱绌虹櫧锛歯owrap锛涘搴︼細0%锛涙孩鍑猴細闅愯棌锛泃ransition:width1slinear;}.progress:hover::after{width:100%;}鏈€鍚庣殑缁撴灉鏄繖鏍风殑锛氫絾鏄彉鍖栦笉鏄緢鏄庢樉銆傝鎴戜滑娣诲姞鏂囨湰闃村奖鍜岃儗鏅互浣挎洿鏀规洿鍔犳槑鏄俱€?progress::after{/*鍦ㄤ唬鐮佷箣鍓?/background-color:#c8edd1;text-shadow:0px1px2px#aed7b8;}鍒版缁撴潫锛屾湰鏂囧埌姝ょ粨鏉燂紝甯屾湜鏈枃鑳藉澶у鏈夋墍甯姪:-)鏈€杩戝張鍋氫簡涓€涓柊鐨勫叕浼楀彿锛氬啓浠ｇ爜鐨勫搱锛岃鎵撹祻娉ㄦ剰馃槃銆傚悗闈細鎱㈡參绉疮鑷繁鎺屾彙鐨勫墠绔煡璇嗗拰鑱屽満鐭ヨ瘑銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
